Google Maps API V3学习【限制地图缩放级别和显示范围 包含V2版本程序】

google map V2:

自定义地图缩放范围:

控制地图的缩放级别范围需要重载GMapType的getMinimumResolution()和getMaximumResolution()方法。下面的代码将地图的缩放级别设置为12-16。

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

 

 

Js代码   收藏代码
  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事件。在每次地图拖动结束时判断当前位置是否在限制范围之内。

 

Js代码   收藏代码
  1. //设置地图显示范围  
  2. google.maps.Event.addListener(map, 'dragend'function(){  
  3.     checkMapBounds(map, mapRangeBound);  
  4. });  
 

google map V3:

 

Js代码   收藏代码
  1. var minZoomLevel = 4;  
  2. var map = new google.maps.Map(document.getElementById('map'), {  
  3.     zoom: minZoomLevel,  
  4.     center: new google.maps.LatLng(35.570335826274345, 106.53511059863281),  
  5.     mapTypeId: google.maps.MapTypeId.ROADMAP  
  6. });   
  7.   
  8. //自定义地图缩放范围  
  9. google.maps.event.addListener(map, 'zoom_changed',  
  10. function() {  
  11.     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);  
  12. });   
  13.   
  14. //自定义地图的显示范围:中国区域内部  
  15. var strictBounds = new google.maps.LatLngBounds(  
  16.     new google.maps.LatLng(14.48003790418668, 66.28120434863283),   
  17.     new google.maps.LatLng(54.44617552862156, 143.71284497363283  
  18. ));  
  19. google.maps.event.addListener(map, 'dragend',  
  20. function() {  
  21.     if (strictBounds.contains(map.getCenter())) return;  
  22.     var c = map.getCenter(),  
  23.     x = c.lng(),  
  24.     y = c.lat(),  
  25.     maxX = strictBounds.getNorthEast().lng(),  
  26.     maxY = strictBounds.getNorthEast().lat(),  
  27.     minX = strictBounds.getSouthWest().lng(),  
  28.     minY = strictBounds.getSouthWest().lat();  
  29.     if (x < minX) x = minX;  
  30.     if (x > maxX) x = maxX;  
  31.     if (y < minY) y = minY;  
  32.     if (y > maxY) y = maxY;  
  33.     map.setCenter(new google.maps.LatLng(y, x));  
  34. });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值