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

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

2010-04-07 11:06:15|  分类： 默认分类|字号 订阅

在使用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定义一个地图的范围。在地图拖动或移动后判断地图的中心是否移出限制的范围。如果超出范围则移动地图到限制范围内。

 //限制地图的显示范围
  function checkMapBounds(map, mapRange)
  {
      if(map)
      {
          if(mapRange.contains(map.getCenter()))
          {
              return;
          }
     
         var center = map.getCenter();
         var centerX = center.lng();
         var centerY = center.lat(); 
 
         var maxX = mapRange.getNorthEast().lng();
         var maxY = mapRange.getNorthEast().lat();
         var minX = mapRange.getSouthWest().lng();
         var minY = mapRange.getSouthWest().lat();
 
        if(centerX < minX) { centerX = minX; }
         if(centerX > maxX) { centerX = maxX; }
         if(centerY < minY) { centerY = minY; }
         if(centerY > maxY) { centerY = maxY; }
map.panTo(new google.maps.LatLng(centerY, centerX));
     }
 }

 

 然后将此方法绑定到dragend事件。在每次地图拖动结束时判断当前位置是否在限制范围之内。

  // 设置地图显示范围
  google.maps.Event.addListener(map, 'dragend',  function(){
     checkMapBounds(map, mapRangeBound);
 });

//注意 LatLng中的参数表示经度和纬度：

var myLatlng1 = new google.maps.LatLng(0,0);
var mapRangeBound= new google.maps.LatLngBounds(myLatlng1, myLatlng1);