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

时间：2010-09-29 00:37:57

标签： javascript google-maps google-maps-api-3

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

有没有办法实现这个目标？

我在使用StyledMap限制缩放级别方面取得了一定的成功，但我只是限制了ROADMAP，我无法通过这种方式限制其他基本类型的缩放。

感谢您的帮助

12 个答案:

答案 0 :(得分：175)

限制缩放级别的更好方法可能是使用minZoom / maxZoom选项而不是对事件做出反应？

var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);

或者可以在地图初始化期间指定选项，例如：

var map = new google.maps.Map(document.getElementById('map-canvas'), opt);

请参阅：Google Maps JavaScript API V3 Reference

答案 1 :(得分：118)

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

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

请考虑以下示例： Fiddle Demo 

<!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 Example: Force stop map dragging

答案 2 :(得分：6)

限制v.3 +的缩放。 在地图设置中添加默认缩放级别和minZoom或maxZoom（如果需要，则添加两者） 缩放级别为0到19。 如果需要限制，您必须声明deafult缩放级别。都是区分大小写的！

function initialize() {
   var mapOptions = {
      maxZoom:17,
      minZoom:15,
      zoom:15,
      ....

答案 3 :(得分：5)

好消息。从2019年2月14日启动的Maps JavaScript API版本3.35开始，您可以使用新的restriction选项以限制地图的视口。

根据文档

  

MapRestriction界面

     

可以应用于地图的限制。地图的视口不会超出这些限制。

来源：https://developers.google.com/maps/documentation/javascript/reference/3.35/map#MapRestriction

因此，现在您只需在地图初始化期间添加限制选项即可。看下面的示例将视口限制为瑞士

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 46.818188, lng: 8.227512},
    minZoom: 7,
    maxZoom: 14,
    zoom: 7,
    restriction: {
      latLngBounds: {
        east: 10.49234,
        north: 47.808455,
        south: 45.81792,
        west: 5.95608
      },
      strictBounds: true
    },
  });
}
#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" async defer></script>

我希望这会有所帮助！

答案 4 :(得分：3)

限制范围的更好方法...使用上面海报中的包含逻辑。

var dragStartCenter;

google.maps.event.addListener(map, 'dragstart', function(){
                                       dragStartCenter = map.getCenter();
                                         });

google.maps.event.addListener(this.googleMap, 'dragend', function(){
                            if (mapBounds.contains(map.getCenter())) return;
                    map.setCenter(this.dragStart);
                           });

答案 5 :(得分：2)

myOptions = {
        center: myLatlng,
        minZoom: 6,
        maxZoom: 9,
        styles: customStyles,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

答案 6 :(得分：1)

这可用于将地图重新​​定位到特定位置。这就是我需要的。

    var MapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(35.676263, 13.949096),
    new google.maps.LatLng(36.204391, 14.89038));

    google.maps.event.addListener(GoogleMap, 'dragend', function ()
    {
        if (MapBounds.contains(GoogleMap.getCenter()))
        {
            return;
        }
        else
        {
            GoogleMap.setCenter(new google.maps.LatLng(35.920242, 14.428825));
        }
    });

答案 7 :(得分：0)

这是解决可视区域限制问题的变种。

        google.maps.event.addListener(this.map, 'idle', function() {
            var minLat = strictBounds.getSouthWest().lat();
            var minLon = strictBounds.getSouthWest().lng();
            var maxLat = strictBounds.getNorthEast().lat();
            var maxLon = strictBounds.getNorthEast().lng();
            var cBounds  = self.map.getBounds();
            var cMinLat = cBounds.getSouthWest().lat();
            var cMinLon = cBounds.getSouthWest().lng();
            var cMaxLat = cBounds.getNorthEast().lat();
            var cMaxLon = cBounds.getNorthEast().lng();
            var centerLat = self.map.getCenter().lat();
            var centerLon = self.map.getCenter().lng();

            if((cMaxLat - cMinLat > maxLat - minLat) || (cMaxLon - cMinLon > maxLon - minLon))
            {   //We can't position the canvas to strict borders with a current zoom level
                self.map.setZoomLevel(self.map.getZoomLevel()+1);
                return;
            }
            if(cMinLat < minLat)
                var newCenterLat = minLat + ((cMaxLat-cMinLat) / 2);
            else if(cMaxLat > maxLat)
                var newCenterLat = maxLat - ((cMaxLat-cMinLat) / 2);
            else
                var newCenterLat = centerLat;
            if(cMinLon < minLon)
                var newCenterLon = minLon + ((cMaxLon-cMinLon) / 2);
            else if(cMaxLon > maxLon)
                var newCenterLon = maxLon - ((cMaxLon-cMinLon) / 2);
            else
                var newCenterLon = centerLon;

            if(newCenterLat != centerLat || newCenterLon != centerLon)
                self.map.setCenter(new google.maps.LatLng(newCenterLat, newCenterLon));
        });

strictBounds是new google.maps.LatLngBounds()类型的对象。 self.gmap存储Google地图对象（new google.maps.Map()）。

它确实有效，但是如果你的界限覆盖它们，不仅要忘记考虑穿过第0个经络和平行线的痔疮。

答案 8 :(得分：0)

出于某种原因

if (strictBounds.contains(map.getCenter())) return;

对我没用（可能是南半球问题）。我不得不把它改成：

    function checkBounds() {
        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 > maxX || y < minY || y > maxY) {
            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));
        }
    }

希望它会对某人有所帮助。

答案 9 :(得分：0)

一个解决方案是，如果您知道特定的纬度/经度。

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(new google.maps.LatLng(latitude, longitude));
    map.setZoom(8);

});

如果没有特定的lat / lng 

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(map.getCenter());
    map.setZoom(8);

});

或

google.maps.event.addListener(map, 'idle', function() {

    var bounds = new google.maps.LatLngBounds();
    map.setCenter(bounds.getCenter());
    map.setZoom(8);

});

答案 10 :(得分：0)

截至2016年中期，没有官方限制可见区域的方法。大多数限制边界的临时解决方案都存在缺陷，因为它们不会严格限制边界以适应地图视图，只有在地图中心超出指定边界时才会限制它。如果你想限制像我一样覆盖图像的边界，这可能会导致如下图所示的行为，其中底层地图在我们的图像叠加下可见：

enter image description here

为了解决这个问题，我创建了一个library，它成功地限制了边界，因此您无法从叠加层中移出。

然而，与其他现有解决方案一样，它存在“振动”问题。当用户足够积极地平移地图时，在他们释放鼠标左键后，地图仍然会自动继续平移，逐渐减慢。我总是将地图返回到边界，但这会导致振动。此刻平移效果无法通过Js API提供的任何方式停止。似乎在Google添加对map.stopPanningAnimation（）等内容的支持之前，我们将无法创建流畅的体验。

使用上述库的示例，我能够获得最顺畅的严格界限：

function initialise(){
  
  var myOptions = {
     zoom: 5,
     center: new google.maps.LatLng(0,0),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  var map = new google.maps.Map(document.getElementById('map'), myOptions);
  
  addStrictBoundsImage(map);
}

function addStrictBoundsImage(map){
	var bounds = new google.maps.LatLngBounds(
		new google.maps.LatLng(62.281819, -150.287132),
		new google.maps.LatLng(62.400471, -150.005608));

	var image_src = 'https://developers.google.com/maps/documentation/' +
		'javascript/examples/full/images/talkeetna.png';

	var strict_bounds_image = new StrictBoundsImage(bounds, image_src, map);
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false"});
      </script>
<body style="margin:0px; padding:0px;" onload="initialise()">
	 <div id="map" style="height:400px; width:500px;"></div>
     <script  type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>

该库还可以自动计算最小缩放限制。然后，它使用minZoom地图的属性限制缩放级别。

希望这可以帮助那些想要一个完全尊重给定边界并且不想让它们平移的解决方案的人。

答案 11 :(得分：-4)

这可能会有所帮助。

  var myOptions = {
      center: new google.maps.LatLng($lat,$lang),
      zoom: 7,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

可以根据需要自定义缩放级别。

相关问题
最新问题