百度地圖建立標註marker,最優縮放級別
阿新 • • 發佈:2019-02-17
百度地圖建立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 } }