谷歌地图v3 - 限制可视区域和缩放级别 | 限制可视区域和缩放级别

本文介绍了谷歌地图v3 - 限制可视区域和缩放级别的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以将Google地图v3限制在某个区域？我想只允许显示某个区域（例如国家），并且不允许用户在别处滑动。另外我想限制缩放级别 - 例如只有级别6和9之间。我想要使用所有的基础地图类型。

有什么方法可以实现这一点？

通过使用StyledMap限制缩放级别，我取得了部分成功，但成功仅限于ROADMAP，我无法通过这种方式限制其他基本类型的缩放。

感谢您的帮助

解决方案

dragend 事件，并且如果地图拖动到允许范围之外，请将其移回内部。您可以在对象，然后使用 contains（）方法来检查新的lat / lng中心是否在界限内。

您也可以非常容易地限制缩放级别。

考虑以下示例：

 <！DOCTYPE html> 
< html> 
< head> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/> 
< title> Google Maps JavaScript API v3示例：限制平移和缩放< / title> 
< script type =text / javascript
 src =http://maps.google.com/maps/api/js?sensor=false>< / script> 
< / head> 
< body> 
< div id =mapstyle =width：400px; height：300px;>< / div> 
 
< script type =text / javascript> 
 
 //这是我们允许的最小缩放级别
 var minZoomLevel = 5; 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：minZoomLevel，
 center：new google.maps.LatLng（38.50 ，-90.50），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 //北美的边界
 var strictBounds = new google.maps.LatLngBounds（
 new google.maps.LatLng（28.70，-127.50），
 new google.maps.LatLng（48.85，-55.90）
）; 
 
 //监听dragend事件
 google.maps.event.addListener（map，'dragend'，function（）{
 if（strictBounds.contains（map.getCenter （））return; 
 
 //我们超出范围 - 将地图移回界限内
 
 var c = map.getCenter（），
x = c.lng（），
y = c.lat（），
 maxX = strictBounds.getNorthEast（）。lng（），
 maxY = strictBounds.getNorthEast（）。lat（） ，
 minX = strictBounds.getSouthWest（）。lng（），
 minY = strictBounds.getSouthWest（）。lat（）; 
 
 if（x  if（x> maxX）x = maxX; 
 if（y  if（y> maxY）y = maxY; 
 
 map.setCenter（new google.maps.LatLng（y，x））; 
}）; 
 
 //限制缩放级别
 google.maps.event.addListener（map，'zoom_changed'，function（）{
 if（map.getZoom（））< minZoomLevel ）map.setZoom（minZoomLevel）; 
}）; 
 
< / script> 
< / body> 
< / html>

以上示例的屏幕截图。在这种情况下，用户将无法拖动到更远的南部或远东：

is it possible to limit Google map v3 to a certain area? I want to allow displaying only some area (e.g. a country) and disallow the user to slide elsewhere. Also I want to restrict the zoom level - e.g. only between levels 6 and 9. And I want to use all the base map types.

Is there any way to achieve this?

I had a partial success with limiting zoom level by using StyledMap, but I succeeded only with restricting ROADMAP, I wasn't able to limit zoom on other basic types this way.

Thanks for any help

解决方案

You can listen to the dragend event, and if the map is dragged outside the allowed bounds, move it back inside. You can define your allowed bounds in a LatLngBounds object and then use the contains() method to check if the new lat/lng center is within the bounds.

You can also limit the zoom level very easily.

Consider the following example:

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   <title>Google Maps JavaScript API v3 Example: Limit Panning and Zoom</title>
   <script type="text/javascript"
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
   <div id="map" style="width: 400px; height: 300px;"></div>

   <script type="text/javascript">

   // This is the minimum zoom level that we'll allow
   var minZoomLevel = 5;

   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   // Bounds for North America
   var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(28.70, -127.50),
     new google.maps.LatLng(48.85, -55.90)
   );

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

   // Limit the zoom level
   google.maps.event.addListener(map, 'zoom_changed', function() {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
   });

   </script>
</body>
</html>

Screenshot from the above example. The user will not be able to drag further south or far east in this case:

这篇关于谷歌地图v3 - 限制可视区域和缩放级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！