分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Google Maps v3-限制可见区域和缩放级别，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Google Maps v3-限制可见区域和缩放级别？

开发过程中遇到Google Maps v3-限制可见区域和缩放级别的问题如何解决？下面主要结合日常开发的经验，给出你关于Google Maps v3-限制可见区域和缩放级别的解决方法建议，希望对你解决Google Maps v3-限制可见区域和缩放级别有所启发或帮助；

您可以听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>