百度地图自适应显示地图

By AYE 0

根据标注点坐标范围计算显示缩放级别zoom

1、 计算缩放级别的函数

//根据经纬极值计算绽放级别。  
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。  
        }  
    };  
}  

2、 计算最大经纬度,最小经纬度。计算中心点。并调用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);    
    }   
}  

使用方法:

var points = [
    {"lng": 120.28429, "lat":31.52853},
    {"lng": 119.59794, "lat":31.72322},
    {"lng": 119.88116, "lat":32.31841},
];
var map = new BMap.Map("container");
setZoom(points);

通过官方API

var points = [
    {"lng": 120.28429, "lat":31.52853},
    {"lng": 119.59794, "lat":31.72322},
    {"lng": 119.88116, "lat":32.31841},
];
var view = map.getViewport(eval(points));  
var mapZoom = view.zoom;   
var centerPoint = view.center;   
map.centerAndZoom(centerPoint,mapZoom); 

链接:

自适应显示地图