google map限制地图缩放级别和显示范围

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 });