googleAPI的地图基本操作实例
该实例收集了一些google地图api的基本功能，如放大、缩小、全图、地图漫游、影像图切换、上一视图和下一视图和地图标注、点击标注弹出提示框等功能.下面填出该实例代码供大家分享和学习。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="http://ditu.google.com/maps?file=api&v=2&sensor=true_or_false
&key=ABQIAAAAPGq6RvAR61XN1TBCsKws2RR1QlIE-hpt_fSbcOwWbG618GyNHBR3-AwGR8JO3QL2pN0heescfQHWcg"
type="text/javascript">
</script>
<script type="text/javascript">
var map;
var currentMapXY;
var previMapXy=""; //上一个视图
var currentZoom;
var priviZoom="";
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas")); //类的对象在页面上定义单个地图
//设置地图的类型为卫图 G_NORMAL_MAP- 默认视图 G_SATELLITE_MAP - 显示 Google 地球卫星图像 G_HYBRID_MAP - 混合显示普通视图和卫星视 G_DEFAULT_MAP_TYPES 这三个类型的数组，用于迭代处理
// map.setMapType(G_SATELLITE_MAP);
map.setCenter(new GLatLng(39.917, 116.397), 14); //setCenter() 方法需要 GLatLng 经纬度坐标和缩放级别 深圳：22.70, 114.00
currentMapXY=map.getCenter();
currentZoom=map.getZoom();
map.enableDoubleClickZoom() ; //启用双击缩放地图
map.enableDragging(); //地图拖动
var bounds = map.getBounds(); //获取得图的东南西北的坐标 了解当前视窗的尺寸
var southWest = bounds.getSouthWest(); //西南 lng()：经度 lat() 纬度
var northEast = bounds.getNorthEast(); //东北
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat(); //纬度差
for (var i = 0; i < 4; i++) { //得到随机的4个点
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()); //获得点的坐标
map.addOverlay(new NewGMarker(point)); //加入点标记
}
var Overmap = new GOverviewMapControl(new GSize(162,150)); //添加鹰眼图，并设置鹰眼图的大小
map.addControl(Overmap);
// ov_ctrl = Overmap.getOverviewMap();
// setTimeout("ov_ctrl.setMapType(G_SATELLITE_MAP);",14);
map.addControl(new GSmallMapControl()); //地图----替换影像图转换
map.addControl(new GMapTypeControl()); //卫星
//alert(g_myMap)
GEvent.addListener(map, "moveend", function() {
//alert("地图有变化");
getMapView();
});
}
}
function getMapView(){
var _map,_zoom;
if(currentMapXY!=""&¤tZoom!=""){
//map.getCenter()+"---"+map.getZoom()
_map=currentMapXY;
_zoom=currentZoom;
currentMapXY=map.getCenter();
currentZoom=map.getZoom();
if(previMapXy==""&&priviZoom==""){
previMapXy=_map;
priviZoom=_zoom;
}else{
previMapXy+="|"+_map;
priviZoom+="|"+_zoom;
}
}
//alert("**上一个**"+previMapXy+"----"+priviZoom);
}
function NewGMarker(point){ //弹出一个窗口
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
map.openInfoWindow(point, document.createTextNode("弹，弹，谭，我是弹出来的哦")); // 要创建信息窗口
})
return marker;
}
function imageLayerSwitch(){ //影像图转换
if(map.getCurrentMapType()==G_SATELLITE_MAP){
map.setMapType(G_NORMAL_MAP);
}else{
map.setMapType(G_SATELLITE_MAP)
}
}
function zoomIn(){ //放大
map.zoomIn();
}
function zoomOut(){ //缩小
map.zoomOut();
}
function zoomFullExtent(){
map.setCenter(new GLatLng(39.917, 116.397), 14);
}
function mapPan(){ //地图漫游
map.enableDragging() ; //允许地图拖动
}
function next(){ //下一视图--有问题
try{
previMapXy=previMapXy.toString();
var mapXyArrTemp=previMapXy.split("|");
var priviZoomArr=priviZoom.split("|");
for(var i=mapXyArrTemp.length-1;i<mapXyArrTemp.length;i--){
var mapXyArr=mapXyArrTemp[i].substr(1,mapXyArrTemp[i].length-2);
mapXyArr=mapXyArr.split(",");
var x=parseFloat(mapXyArr[0]);
var y=parseFloat(mapXyArr[1]);
alert(x+"^^^"+y+"---"+priviZoomArr[i])
map.setCenter(new GLatLng(x,y), parseInt(priviZoomArr[i]));
}
}catch(err){}
}
function previous(){ //上一视图---有问题
try{
previMapXy=previMapXy.toString();
var mapXyArrTemp=previMapXy.split("|");
var priviZoomArr=priviZoom.split("|");
for(var i=mapXyArrTemp.length-1;i<mapXyArrTemp.length;i--){
var mapXyArr=mapXyArrTemp[i].substr(1,mapXyArrTemp[i].length-2);
mapXyArr=mapXyArr.split(",");
var x=parseFloat(mapXyArr[0]);
var y=parseFloat(mapXyArr[1]);
alert(x+"^^^"+y+"---"+priviZoomArr[i])
map.setCenter(new GLatLng(x,y), parseInt(priviZoomArr[i]));
}
}catch(err){}
}
</script>
<body onload="initialize()" >
<div style=" position: absolute; top:30PX; left:30PX ;height:35px ; float:right">
<table border="1"cellpadding="0" cellspacing="0" bordercolor="#0000FF">
<tr>
<td><img src="images/toolbar/imageLayerSwitchImg.gif" title="影像图切换" onclick=" imageLayerSwitch(); return false;" /></td>
<td><img src="images/toolbar/zoomIn.gif" title="放大" onclick=" zoomIn(); return false;" /></td>
<td><img src="images/toolbar/zoomOut.gif" title="缩小" onclick=" zoomOut(); return false;" /></td>
<td><img src="images/toolbar/zoomFullExtent.gif" title="全图" onclick=" zoomFullExtent(); return false;" /></td>
<td><img src="images/toolbar/mapPan.gif" title="地图漫游" onclick="mapPan(); return false;" /></td>
<td><img src="images/toolbar/previous.gif" title="上一视图" onclick="previous(); return false;" /></td>
<td><img src="images/toolbar/next.gif" title="下一视图" onclick="next(); return false;" /></td>
</tr>
</table>
</div>
<div id="map_canvas" style="position: absolute; width: 500px; height: 400px; left: 13px; top: 70px;"> </div>
</body>
</html>