【轉】百度地圖api，根據多點注標坐標范圍計算地圖縮放級別zoom自適應地圖

本文記錄 如何通過標注點markers的坐標范圍來計算百度地圖的顯示級別zoom。

 

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

 

在天地圖系列文章里我也介紹了類似的辦法來處理天地圖的方法，但是也略有不同，天地圖的時候我是用的計算經緯度差的方法。 來跟每一個顯示級別的差做比較，從而確定天地圖的顯示級別。

而百度地圖我用了另外的辦法。 

 

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

 

1.數據：

 

//數據准備
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}
];

2.加載地圖：

 

 

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

3.計算最大經緯度，最小經緯度。計算中心點。並調用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);
    }
}

4.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);  // 創建點坐標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+3;//之所以會多3，是因為地圖范圍常常是比例尺距離的10倍以上。所以級別會增加3。
        }
    };
}

5.加載標注點。上一文章的內容。

 

//在軌跡點上創建圖標，並添加點擊事件
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);
            });
        })();

    }

}

 

 

效果圖：

 

如圖。一加載百度地圖，我們顯示的makers標注點剛好在一個比較舒服的顯示級別，都在可視范圍內。

演示地址：http://runningls.com/demos/baidumap/zoom.html

github：https://github.com/liusaint/baiduMap

本文介紹到這里，下一文章我們講百度地圖API實時軌跡。

 

2016-01-08日更新：

評論里有小伙伴說百度地圖api就可以實現這個功能，試了一下，效果很好，建議大家使用這種方法。 非常感謝。    

 

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

 喝水不忘挖井人，原文鏈接：http://blog.csdn.net/liusaint1992/article/details/50071613#comments