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