google map限制地圖縮放層級和顯示範圍

在使用google地圖的時候，很多情況下我們希望只顯示地圖的一部分並限制地圖的縮放層級。這個時候就需要自訂google map的地圖縮放層級和顯示範圍。

自訂地圖縮放範圍

控制地圖的縮放層級範圍需要重載GMapType的getMinimumResolution()和getMaximumResolution()方法。下面的代碼將地圖的縮放層級設定為12-16。

 1 function setMapResolution()
 2 {
 3     //擷取所有地圖類型
 4     var mapTypes = map.getMapTypes();
 5     //對所有地圖類型限制縮放層級
 6     for(var i=0; i<mapTypes.length; i++)
 7     {
 8         mapTypes[i].getMinimumResolution = function() { return 12; };
 9         mapTypes[i].getMaximumResulution = function() { return 16; };
10     }
11 }

 

然後在載入地圖後調用此函數就可以將地圖的縮放層級限制為12-16。

自訂地圖的顯示範圍

限制地圖的顯示範圍稍微複雜一些。首先使用GLatLngBounds定義一個地圖的範圍。在地圖拖動或移動後判斷地圖的中心是否移出限制的範圍。如果超出範圍則移動地圖到限制範圍內。

 1 //限制地圖的顯示範圍
 2 function checkMapBounds(map, mapRange)
 3 {
 4     if(map)
 5     {
 6         if(mapRange.contains(map.getCenter()))
 7         {
 8             return;
 9         }
10     
11         var center = map.getCenter();
12         var centerX = center.lng();
13         var centerY = center.lat(); 
14 
15         var maxX = mapRange.getNorthEast().lng();
16         var maxY = mapRange.getNorthEast().lat();
17         var minX = mapRange.getSouthWest().lng();
18         var minY = mapRange.getSouthWest().lat();
19 
20         if(centerX < minX) { centerX = minX; }
21         if(centerX > maxX) { centerX = maxX; }
22         if(centerY < minY) { centerY = minY; }
23         if(centerY > maxY) { centerY = maxY; }
24         
25         map.panTo(new google.maps.LatLng(centerY, centerX));
26     }
27 }

 

 然後將此方法綁定到dragend事件。在每次地圖拖動結束時判斷當前位置是否在限制範圍之內。

1 //設定地圖顯示範圍
2 google.maps.Event.addListener(map, 'dragend', function(){
3     checkMapBounds(map, mapRangeBound);
4 });