最近在開發百度地圖，需要實現的是地圖初始化的時候，能夠把我們所有的標注點markers顯示在地圖上，并且讓地圖有一個合適的顯示級別。以提高用戶體驗。

找到了了解決方案：
百度地圖每一個顯示級別對應了一個比例尺，這里我們由比例尺入手。 計算最大經緯度與最小經緯度之間的距離，然后把這個距離乘以10（這里的10表示地圖通常占幾個比例遲的大小）。再根據這個結果來確定我們的地圖應該在一個什么樣的比例尺，從而確定我們的縮放級別。

數據

//數據準備 var points = [{"lng":116,"lat":40,"status":1,"id":50},{"lng":117,"lat":31,"status":1,"id":2},{"lng":116,"lat":34,"status":0,"id":3},{"lng":118,"lat":39,"status":0,"id":4},{"lng":110,"lat":35,"status":1,"id":5} ];

加載地圖

var map = new BMap.Map("container");

計算最大經緯度，最小經緯度。計算中心點。并調用getZoom()獲取顯示級別。

//根據原始數據計算中心坐標和縮放級別，并為地圖設置中心坐標和縮放級別。 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), 5); } }

getZoom()。我寫的計算縮放級別的函數。

//根據經緯極值計算綻放級別。 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); // 創建點坐標Avar pointB = new BMap.Point(minLng,minLat); // 創建點坐標Bvar 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+3;//之所以會多3，是因為地圖范圍常常是比例尺距離的10倍以上。所以級別會增加3。}}; }

加載標注點

//在軌跡點上創建圖標，并添加點擊事件 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); //給標注點添加點擊事件。使用立即執行函數和閉包(function() {var thePoint = points[i];marker.addEventListener("click",function(){showInfo(this,thePoint);});})();} }

注：百度地圖api就可以實現這個功能

var points = [point1, point2,point3]; var view = map.getViewport(eval(points)); var mapZoom = view.zoom; var centerPoint = view.center; map.centerAndZoom(centerPoint,mapZoom);

還是對百度地圖API不夠熟悉啊

總結

以上是生活随笔為你收集整理的根据标注点坐标范围计算显示缩放级别zoom自适应显示地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。