谷歌地图页面开发

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lindiwo/article/details/83013455

直接甩代码好了,谷歌地图开发,有注释

<body>
	
		<div class="map">
			<div id="map_canvas"></div>
		</div>
				
			
</body>

js代码

<script type="text/javascript">
	//根据登录用户的权限创建中心点
	var url;
	var map;
    var lat,lng,def_zoom,icon;
    var localMapType = new LocalMapType(config.url,config.maxZoon,config.minZoon);
	var localSaMap = new LocalSaMapType(config.url,config.maxZoon,config.minZoon);
	url=CTX_PATH + "lgyj/map/central/centralQuery.do";
	$.ajax({
	 	url:url,
	 	async:false,
	 	success:function(data){
	 		if(data != undefined && data!=null && data!=""){
		 		lat = data.lat;
		 		lng = data.lng;
		 		def_zoom = data.zoom;
		 		if(data.icon!="" && data.icon!=null)
		 		def_icon =icon_url+data.icon;
	 		}else{
	 			lat = '32.0576115';
		 		lng = '118.7843468';
		 		def_zoom = 15;
	 		}
	 	}
   	});
	window.onload = function(){
		//初始化map
	 	initialize('map_canvas',def_zoom,lat,lng);
	 	
	 	
	 	var mapPoints=${mapPointsJson};
	 	
	 	
	 	for(x in mapPoints){
			//人员数量
			var warnTeller={};
			warnTeller.org_id=mapPoints[x].org_id;
			var mapPoint=mapPoints[x];
			//显示marker
			showPoint(mapPoint,warnTeller);

		}
		
		google.maps.event.addListener(map,'click',function(event){
			//清理marker的浮窗
			clearAllInfoWindow();
			//限制地图显示的层级
			if (map.getZoom() > 15){
				map.setZoom(15);
			} 
			if (map.getZoom() < 7){
				map.setZoom(7);
			}
		});
	}
	
	var infowindows = []; //弹出窗口数据组
	
	/**
 	* 关闭所有窗口
 	*/
	function clearAllInfoWindow(){
		if(infowindows.length>0){
			for(var i=0;i<infowindows.length;i++){
				infowindows[i].close();
			}	
			infowindows.length=0;
		}
	}
	
	function showPoint(mapPoint,warnTeller){
		var url = CTX_PATH + "lgyj/transferRiskCount";
		$.post(url,warnTeller,function(data){
			console.log(x,mapPoint);
			var latlng = new google.maps.LatLng(mapPoint.lat,mapPoint.lng); //点坐标
			var icon;
			//根据数据是否有异常设置图标
			if(data.total > 0){
				icon = '<spring:url value="/resources/map/images/icons/red.png" />';
			}else{
				icon = '<spring:url value="/resources/map/images/icons/green.png" />';
			}
			//新建marker点
			var marker = new google.maps.Marker({
					position: latlng,
					map: map,
					draggable:false,//禁止拖拽
					title:mapPoint.org_name,
					icon:icon,
					org_id:mapPoint.org_id
			}); 
			console.log(marker);
			//站点信息窗口
			var currInfowindow = new google.maps.InfoWindow({
// 					content : getPointHtml(mapPoint.org_id),
					size : new google.maps.Size(210,90)
			});
			//添加点事件
			google.maps.event.addListener(marker, 'click', function(event) {
				var url = CTX_PATH + "lgyj/transferRiskQuery";
				var warnTeller={};
				warnTeller.org_id=this.org_id;
				//查询数据并放在弹出窗口上
				$.post(url,warnTeller,function(result){
					var html = "<div style='width:350px;height:90px'>";
					if(result.length > 0){
						var num = 0; 
						html = "<table border='1'><tr><th>姓名</th><th>柜员号</th><th>轮岗日期</th></tr>"
						for(var i =0 ; i<result.length; i++){
							html += "<tr><td>"+result[i].name+"</td><td>"+result[i].tlr_id+"</td><td>"
					 		+result[i].deadline_date_str+"</td></tr>"
						}
						html +="</table>"
					}else{
						html += "<strong>提示!</strong> 不存在未轮岗风险人员!"
					}
					html += "</div>";
					clearAllInfoWindow();
					currInfowindow.setContent(html);
					currInfowindow.open(map,marker);
					currInfowindow.setZIndex(1000);
					infowindows.push(currInfowindow);
				},'json');
				});
		},'json');
	}
	


</script>
function initialize(id, defaultZoom,lat,lng){

	if(lat!="")
	{
		var myLatlng = new google.maps.LatLng(lat,lng);
	}else
	{
		
	    /*****在此设置地图初始地图中心点***********/
		//南京--->32.0576115, 118.7843468 
		//无锡-------->31.490644,120.311139
		var myLatlng = new google.maps.LatLng(32.0576115, 118.7843468);
	}
	
	var myOptions = {
		center : myLatlng,
		zoom : defaultZoom,
		streetViewControl : false
/*		mapTypeControlOptions : {
			mapTypeIds : ['locaMap','localSaMap']
		// 定义图形切换按钮
		}*/
	};
	map = new google.maps.Map(document.getElementById(id), myOptions);

	map.mapTypes.set('locaMap', localMapType); // 绑定本地地图类型
	map.mapTypes.set('localSaMap', localSaMap);// 绑定离线卫星地图
	map.setMapTypeId('locaMap'); // 指定显示本地地图
	/***********************************************************************/
	google.maps.event.addListener(map,'maptypeid_changed',function(){
		if(map.getMapTypeId()=='locaMap'){
			map.overlayMapTypes.removeAt(0);
		}else if(map.getMapTypeId()=='localSaMap'){
			map.overlayMapTypes.insertAt(0, localSaDLMapType);
		}
	});
	/***********************************************************************/	
}

如果有人用到的话,请自己适当挑取一些代码

展开阅读全文

没有更多推荐了,返回首页