googleAPI的地图基本操作实例

最新推荐文章于 2018-03-28 16:14:30 发布

lting19880817

最新推荐文章于 2018-03-28 16:14:30 发布

阅读量227

点赞数

分类专栏： gis 文章标签： Google JavaScript XHTML HTML ViewUI

gis 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该实例收集了一些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&amp;v=2&amp;sensor=true_or_false
    &amp;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!=""&&currentZoom!=""){
		//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 οnlοad="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="影像图切换" οnclick=" imageLayerSwitch(); return false;" /></td>
		<td><img src="images/toolbar/zoomIn.gif"  title="放大" οnclick=" zoomIn(); return false;" /></td>	
		<td><img src="images/toolbar/zoomOut.gif"  title="缩小" οnclick=" zoomOut(); return false;" /></td>
		<td><img src="images/toolbar/zoomFullExtent.gif"  title="全图" οnclick=" zoomFullExtent(); return false;" /></td>
		<td><img src="images/toolbar/mapPan.gif"  title="地图漫游" οnclick="mapPan(); return false;" /></td>		
		<td><img src="images/toolbar/previous.gif"  title="上一视图" οnclick="previous(); return false;" /></td>
		<td><img src="images/toolbar/next.gif"  title="下一视图" οnclick="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>

lting19880817

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
googleAPI的地图基本操作实例

该实例收集了一些google地图api的基本功能，如放大、缩小、全图、地图漫游、影像图切换、上一视图和下一视图和地图标注、点击标注弹出提示框等功能.下面填出该实例代码供大家分享和学习。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
复制链接

扫一扫