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