版權聲明：本文為博主原創文章，轉載請註明出處。 https://blog.csdn.net/liusaint1992/article/details/50071613

上一文章講了如何給地圖添加點擊事件做出不同的反應。

本文記錄 如何通過標註點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}
		];
 

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

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

		//根據經緯極值計算綻放級別。
		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。
				}
			};
		}

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

百度地圖API二：根據標註點坐標範圍計算顯示縮放級別zoom自適應顯示地圖