百度地图创建标注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
			   }				  
		   }

猜你喜欢

转载自blog.csdn.net/qq_38880700/article/details/81532928