Google Maps v3-限制可见区域和缩放级别

一尘不染

Google Maps v3-限制可见区域和缩放级别

javascript

是否可以将Google Map v3限制在某个区域？我只允许显示某些区域（例如国家/地区），而不允许用户滑动到其他位置。另外，我想限制缩放级别-
例如仅在6和9级之间。并且我想使用所有基本地图类型。

有什么办法可以做到这一点？

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

谢谢你的帮助

阅读 341

2020-04-25

共1个答案

一尘不染

您可以听dragend事件，如果将地图拖到允许的范围之外，请将其移回内部。您可以在LatLngBounds对象中定义允许的范围，然后使用该contains()方法检查新的经纬度中心是否在范围内。

您也可以非常轻松地限制缩放级别。

考虑以下示例： [Fiddle Demo](http://jsfiddle.net/cse_tushar/9d4jy4ye/)

<!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>

上面示例的屏幕截图。在这种情况下，用户将无法向南或向东拖动：

Google Maps JavaScript API v3示例：强制停止地图拖动

2020-04-25