1. 程式人生 > >百度地圖建立標註marker,最優縮放級別

百度地圖建立標註marker,最優縮放級別

 百度地圖建立marker座標,新增自定義標註:

//首先要引入百度api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ak=你的金鑰&s=1"></script>
            function drawmap(){
			       //建立地圖
			   var map = new BMap.Map("LeftDown"); 
			   //允許縮放
			   map.enableScrollWheelZoom(true);     
			   //只留下地圖和衛星
			   map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP ]}));
			   var points=[];
			   $.ajax({
				  url:"${webRoot}/user/******",
				  async: false,//同步
				  success:function(data){
					 for(var i=0;i<data.length;i++){
						 var info="";//接收經緯度資訊
						 info={"lng":data[i].longitude,"lat":data[i].latitude,"name":data[i].tenant_name,"count":data[i].count,"address":data[i].contact_address};
						 points.push(info);
					 }
				  }
			   }); 
			   setZoom(points);
			   //獲取中心點
			   function setZoom(points){
			       if(points.length>0){  
			           var maxLng = points[0].lng; 
			           var minLng = points[0].lng;  
			           var maxLat = points[0].lat;  
			           var minLat = points[0].lat;  
			           var res;  
			           for (var i = points.length - 1; i >= 0; i--) {  
			               res = points[i];  
			               if(res.lng > maxLng) maxLng =res.lng;  
			               if(res.lng < minLng) minLng =res.lng;  
			               if(res.lat > maxLat) maxLat =res.lat;  
			               if(res.lat < minLat) minLat =res.lat;  
			           };  
			           var cenLng =(parseFloat(maxLng)+parseFloat(minLng))/2;  //縮放中心的精度
			           var cenLat = (parseFloat(maxLat)+parseFloat(minLat))/2; //縮放中心的緯度
			           var zoom = getZoom(maxLng, minLng, maxLat, minLat);  //縮放級別
			           map.centerAndZoom(new BMap.Point(cenLng,cenLat), zoom);//中心點和縮放級別    
			       }else{  
			           //沒有座標,顯示全中國  
			           map.centerAndZoom(new BMap.Point(103.388611,35.563611), 4);  
			           return false;
			       };   
			   }
			   //獲取最佳縮放級別
			   function getZoom (maxLng, minLng, maxLat, minLat) {  
				    var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"];//級別18到3。  
				    var pointA = new BMap.Point(maxLng,maxLat);  // 建立點座標A  
				    var pointB = new BMap.Point(minLng,minLat);  // 建立點座標B  
				    var distance = map.getDistance(pointA,pointB).toFixed(1);  //獲取兩點距離,保留小數點後兩位  
				    for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {  
				        if(zoom[i] - distance > 0){
				            return 18-i+2;//之所以會多2,是因為地圖範圍常常是比例尺距離的10倍以上。所以級別會增加2。  
				        }  
				    };  
			   }			
			   //建立標註點並新增到地圖中
			   addMarker(points);
			   function addMarker(points) {
			       //迴圈建立標註點
			       for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
			           var point = new BMap.Point(points[i].lng, points[i].lat); //將標註點轉化成地圖上的點
			           var marker = new BMap.Marker(point); //將點轉化成標註點
			           map.addOverlay(marker);  //將標註點新增到地圖上
                       var label = new BMap.Label("自定義文字",{offset:new BMap.Size(20,-10)});
			           label.setStyle({"borderColor":"gray"});//設定框的樣式
			       	   marker.setLabel(label);//新增自定義提示框
			           //迴圈新增監聽事件
			           (function() {
			               var thePoint = points[i];
			               marker.addEventListener("click",
			                   function() {
			                   showInfo(this,thePoint);
			                   var q=map.getZoom();
			    			   console.log(q);
			               });
			            })();
			       }
			   }
			   function showInfo(thisMarker,point) {
			       //獲取點的資訊
			       var sContent = '<ul>'  
			       +'<li style="line-height: 26px;font-size: 15px;">'   
			       +'<span style="width: 40px;display: inline-block;">名稱:</span>' + point.name + '</li>'  
			       +'<li style="line-height: 26px;font-size: 15px;">'
			       +'<span style="width:90px;display: inline-block;">預警人數:</span><a style="font-size:15px" href="${webRoot}/warning/gotocirsesWarning">'+point.count+'</a></li>'
			       +'<li style="line-height: 26px;font-size: 15px;">'
			       +'<span style="width:40px;display: inline-block;">地址:</span>'+point.address+'</li>'  
			       +'</ul>';
			       var infoWindow = new BMap.InfoWindow(sContent); //建立資訊視窗物件
			       thisMarker.openInfoWindow(infoWindow); //圖片載入完後重繪infoWindow
			   }				  
		   }