如何限制Google Maps API V3中的平移？

75

在V2中，有一种方法可以限制平移/拖动，以便地图保持在一定范围内。在V3中如何完成？

假设我希望用户只看欧洲。我已经限制了缩放，但是如果允许拖动（出于其他原因，在这种情况下，我必须这样做），则用户可以平移超出我要显示的区域。

请提供工作示例或代码段-我不是专家编码人员...

javascript  google-maps  google-maps-api-3 
— 塔尔
source
从3.35版开始，您可以使用restrictionoption来限制地图的视口。在stackoverflow.com/a/54717220/5140781中查看示例和说明。
— xomena '19

Answers:

91

我想我参加聚会有点晚了，但是由于这正是我现在所需要的，并且我对此有所改进，所以我认为我还是应该发布答案。

有了Daniel Vassallo和brendo的回答，用户仍然可以使用平移控件（如果已激活）从所需区域移开。@ Yauhen.F在评论中提及。

因此，我没有使用dragend事件，而是使用center_changed事件。在拖动过程中以及每次有人使用平移控件时，都会连续触发该控件。

// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(70.33956792419954, 178.01171875), 
     new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();

google.maps.event.addListener(map, 'center_changed', function() {
    if (allowedBounds.contains(map.getCenter())) {
        // still within valid bounds, so save the last valid position
        lastValidCenter = map.getCenter();
        return; 
    }

    // not valid anymore => return to last valid position
    map.panTo(lastValidCenter);
});

通过在拖动过程中连续保存最后一个有效位置，移动将仅在超出范围时停止，而不是在拖动结束后回移。......

— 亨宁
source
2
这是一种出色的方法。我喜欢brendo的想法，但这将橡皮筋移回原处，只是将地图停在了边界。我使用此操作将地图变成静态图像，完全没有平移，但带有动态标记。非常便利。谢谢！
— 杰克2012年
2
太好了，center_changed活动是关键。但是在移动（iOS）设备上仍然存在一些问题。
— 科恩
1
有没有人想出如何在手机上做到这一点？在移动设备上拖动时，似乎没有分派center_changed或drag
— K2xL 2013年
1
我知道这里的代码有效，但是在最后一行， map.setCenter(...);比map.panTo(...);？更合适。后者似乎（在CPU上）可能是奢侈的，因为它的目的仅仅是停止平移死路。
— 甜菜根-甜菜根
边界/约束框的边缘似乎随缩放级别而变化...是否可以针对所有缩放级别对其进行修复？
— DrCord 2014年
22

诀窍是监听dragend事件，如果将地图拖到允许的范围之外，请将其移回内部。如果将允许的边界定义为LatLngBounds对象，则可以使用该contains()方法，因为如果给定的lat / lng参数在边界之内，它将返回true。

限制缩放级别也很重要，但似乎您已经在执行此操作。

因此，您可能要尝试以下示例：

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Limit Panning</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"> 

   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 allowedBounds = 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 (allowedBounds.contains(map.getCenter())) return;

     // Out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = allowedBounds.getNorthEast().lng(),
         maxY = allowedBounds.getNorthEast().lat(),
         minX = allowedBounds.getSouthWest().lng(),
         minY = allowedBounds.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示例：限制平移

— 丹尼尔·瓦萨洛（Daniel Vassallo）
source
2
默认情况下，在大地图上（当容器不是太小时），还有一些控件允许用户进行导航（导航面板）。使用时可以按左/右箭头。因此，您的事件不足以解决所有问题。您将需要捕获空闲事件。一个很好的例子是在这里code.google.com/p/gmaps-api-issues/issues/detail?id=1371一些家伙isaac.z.foster发布了它。但是无论如何，执行动作然后重新设置的逻辑是非常糟糕的。默认情况下，谷歌地图在最大缩放级别上显示的最丑陋的东西是几个世界。并且标记是重复的。Google代码确实非常糟糕。
— Yauhen.F 2011年
也关于minZoomLevel。有minzoom地图选项。无需处理事件。
— Yauhen.F 2011年
8

我的版本基于@HenningJ的版本，但对进行了一些修改lastValidCenter以允许沿边界的边缘平滑拖动。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 100% }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script>
        </script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(28.70, -127.50),
                    zoom: 4,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"),
                        mapOptions);

                // bounds of the desired area
                var allowedBounds = new google.maps.LatLngBounds(
                  new google.maps.LatLng(28.70, -127.50),
                  new google.maps.LatLng(48.85, -55.90)
                );
                var boundLimits = {
                    maxLat : allowedBounds.getNorthEast().lat(),
                    maxLng : allowedBounds.getNorthEast().lng(),
                    minLat : allowedBounds.getSouthWest().lat(),
                    minLng : allowedBounds.getSouthWest().lng()
                };

                var lastValidCenter = map.getCenter();
                var newLat, newLng;
                google.maps.event.addListener(map, 'center_changed', function() {
                    center = map.getCenter();
                    if (allowedBounds.contains(center)) {
                        // still within valid bounds, so save the last valid position
                        lastValidCenter = map.getCenter();
                        return;
                    }
                    newLat = lastValidCenter.lat();
                    newLng = lastValidCenter.lng();
                    if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
                        newLng = center.lng();
                    }
                    if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
                        newLat = center.lat();
                    }
                    map.panTo(new google.maps.LatLng(newLat, newLng));
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"/>
    </body>
</html>

在这里提琴：http : //jsfiddle.net/koenpunt/n7h6t/

— 高恩
source
而且它遭受与@HenningJ解决方案相同的问题。这只是检查地图中心是否在边界内。如果地图中心正好位于边界的旁边，则地图的一半位于边界之外。因此，需要进行更复杂的计算（对于低缩放级别，中心可能是一个很好的替代，但是对于世界视图则不是）–
— JoseGómez2015年
这必须是一个答案
好像您仍然希望人们放大/缩小
— 都不一样
3

这是上述内容的一个不错的扩展，它将通过侦听dragstart事件将地图的中心重置为最后一个有效位置。

// Limit panning
var lastCenter = map.getCenter();

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

google.maps.event.addListener(map, 'dragend', function() {
    if(allowedBounds.contains(map.getCenter())) return;

    map.setCenter(lastCenter);
});
— 布伦多
source
3

最好的限制方法是设置缩放级别和中心点，并禁用如下所示的缩放，滚动等控件。

 var latlng = new google.maps.LatLng(18.283078,84.047556);
     var myOptions = {
          zoom: 12,

          center: latlng,
          zoomControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        disableDoubleClickZoom: true,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),   myOptions);
— 阿杰尔
source
如果要完全限制平移和缩放，而不是按要求“限制在某些范围内”，这是一个很好的解决方案。如果地图已经存在，并且您想在创建地图后将其锁定，则也可以使用map.setOptions（）。
— intotecho
2

这是汤姆·安德森（Tom Andersen）的答案和当前接受的HenningJ答案的合并解决方案。这样做的好处是：1）允许沿边缘平滑滚动（HenningJ的解决方案似乎笨拙），以及2）放大到某个区域时没有任何问题（再次，HenningJ的答案似乎在放大时中断了）并靠近边界）。

Tom的答案几乎对我有用，除了它将锁定区域放置在屏幕中央，这对于我正在处理的应用程序是不可接受的。

// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(70.33956792419954, 178.01171875), 
     new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();

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

    var mapBounds = map.getBounds();
    var mapNe = mapBounds.getNorthEast();
    var mapSw = mapBounds.getSouthWest();
    var center = map.getCenter();

    if( allowedBounds.contains(mapNe) && allowedBounds.contains(mapSw) ) {
        //the user is scrolling within the bounds.
        lastValidCenter = center;
        return;
    }

    //the user has scrolled beyond the edge.

    var mapWidth = mapNe.lng() - mapSw.lng();
    var mapHeight = mapNe.lat() - mapSw.lat();

    var x = center.lng();
    var y = center.lat();

    var maxX = allowedBounds.getNorthEast().lng();
    var maxY = allowedBounds.getNorthEast().lat();
    var minX = allowedBounds.getSouthWest().lng();
    var minY = allowedBounds.getSouthWest().lat();

    //shift the min and max dimensions by 1/2 of the screen size, so the bounds remain at the edge of the screen

    maxX -= (mapWidth / 2);
    minX += (mapWidth / 2);

    maxY -= (mapHeight / 2);
    minY += (mapHeight / 2);


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

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

});
— 乔治·休伯
source
2

现在，新版的Google Map API提供了一种限制边界的方法。初始化地图时只需指定限制边界。例如，如果您只想将边界限制在新西兰，则可以这样操作：

  <body>
    <div id="map"></div>
    <script>
      var map;
      var NEW_ZEALAND_BOUNDS = {
        north: -34.36,
        south: -47.35,
        west: 166.28,
        east: -175.81,
      };
      var AUCKLAND = {lat: -37.06, lng: 174.58};

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: AUCKLAND,
          restriction: {
            latLngBounds: NEW_ZEALAND_BOUNDS,
            strictBounds: false,
          },
          zoom: 7,
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>

仅供参考：要限制整个世界的地图，您可以使用以下界限。这里最棘手的部分是使用strictBounds:true。这将确保用户无法缩小世界视图：

map = new google.maps.Map(document.getElementById('map'), {
    restriction: {
        latLngBounds: {
            north: 85,
            south: -85,
            west: -180,
            east: 180
        },
        strictBounds: true,
    },
   zoom: 7,
   });
— connect2Coder
source
1

在这个主题上还有另一个主题也很不错。我要解决的问题是，我希望在页面加载时设置边界，而不是手动设置边界并检查中心围堵，然后在放大时允许拖动到边缘。

因此，我一次在地图加载上设置了平移边界。然后，我检查地图是否仍处于最大缩放，如果是，则返回初始中心。如果放大了，我想平移到初始边界的EDGE，而不仅仅是检查是否包含CENTER，因为这会将允许的平移扩展到视口的一半。

不幸的是，尽管这可以完成工作并且在缓慢平移时可以正常工作，但是如果快速平移会有些生涩。

如果您有关于如何避免这种情况的建议，我将不胜感激。

    map = new google.maps.Map( // defaults
        document.getElementById("map22"),
        {
            disableDefaultUI        : true,
            zoomControl             : true,
            zoom                    : 7,
            minZoom                 : 7,
            maxZoom                 : 10,
            center                  : new google.maps.LatLng(
                64.99473104134819,
                -19.22332763671875
            ),
            mapTypeId               : google.maps.MapTypeId.ROADMAP
        }
    );



    function borders(){
        return {
            maxLat : map.getBounds().getNorthEast().lat(),
            maxLng : map.getBounds().getNorthEast().lng(),
            minLat : map.getBounds().getSouthWest().lat(),
            minLng : map.getBounds().getSouthWest().lng(),
            center : map.getCenter()
        }
    }

    google.maps.event.addListenerOnce(map,'idle',function() {
        limit = borders();
    });

    google.maps.event.addListener(map,'drag',function() {
        if(map.getZoom() == 7) return map.setCenter(limit.center);
        current = borders();
        if( current.maxLng < limit.maxLng && current.minLng > limit.minLng ) activeCenterLng = current.center.lng();
        if( current.maxLat < limit.maxLat && current.minLat > limit.minLat ) activeCenterLat = current.center.lat();
        map.setCenter(
            new google.maps.LatLng(
                activeCenterLat,
                activeCenterLng
            )
        );
    });
— 蒂姆
source
1

我尝试了HenningJ的回答，直到中心位于边界的一角，这才是理想的，地图不会停止平移。这是我的解决方案：

google.maps.event.addListener(map, 'center_changed', function() {
    var mapBounds = map.getBounds();
    if(allowedBounds.contains(mapBounds.getNorthEast()) && allowedBounds.contains(mapBounds.getSouthWest())) {
        lastCenter = map.getCenter();
        return;
    }

    map.panTo(lastCenter);
}, this));
— 布兰登·彼得斯
source
1

这是一个适用于移动设备和台式机的简单解决方案。它将停止地图在世界上最大或最小纬度之外的平移，并允许设置最小缩放级别，这可以帮助防止因过远缩放而使灰色区域可见（取决于您为地图设置的大小）：

（我建议按照HenningJ接受的答案中的建议谨慎使用center_changed事件。就我而言，此事件创建的事件数量会导致Google Chrome浏览器出现堆栈溢出错误。相反，可以使用'dragend'事件-尽管这样做会允许用户将其拖到区域之外，然后立即“快速跳回”到地图的有效区域）。

var lastValidCenter;
var minZoomLevel = 2;

setOutOfBoundsListener();

function setOutOfBoundsListener() {
        google.maps.event.addListener(map, 'dragend', function () {
            checkLatitude(map);
        });
        google.maps.event.addListener(map, 'idle', function () {
            checkLatitude(map);
        });
        google.maps.event.addListener(map, 'zoom_changed', function () {
            checkLatitude(map);
        });
};

function checkLatitude(map) {
    if (this.minZoomLevel) {
        if (map.getZoom() < minZoomLevel) {
            map.setZoom(parseInt(minZoomLevel));
        }
    }

    var bounds = map.getBounds();
    var sLat = map.getBounds().getSouthWest().lat();
    var nLat = map.getBounds().getNorthEast().lat();
    if (sLat < -85 || nLat > 85) {
        //the map has gone beyone the world's max or min latitude - gray areas are visible
        //return to a valid position
        if (this.lastValidCenter) {
            map.setCenter(this.lastValidCenter);
        }
    }
    else {
        this.lastValidCenter = map.getCenter();
    }
}
— 克里斯·哈克罗（Chris Halcrow）
source
0

当我使用drag或dragend或其他方法时，地图跳回到允许的范围内，而不是简单地限制溢出运动。只需将事件更改为“ center_changed”即可阻止它像这样跳来跳去。

修改的jsfiddle：http : //jsfiddle.net/Vjdde/1/

编辑：不知道为什么小提琴不会产生堆栈溢出，但应该这样，因为setCenter会再次调用center_changed。

— 约翰
source
0

这里的解决方案给我留下了两个问题。首先，如果您按住箭头键以使其开始快速平移，则当它撞到边缘时，它不会一直到边缘，因为由于平移加速度会占用较大的“步数”，因此下一个“步骤”将超出范围，因此不需要最后一步。因此，一旦停止，您可以松开箭头键，然后再按一次，它将平移一点。其次，这些解决方案没有正确包含缩放更改后的平移。我设法解决了这两个问题，然后将解决方案发布到了另一个线程中，但是我认为我应该将其链接到这里，因为这是使我首先朝正确方向开始的线程。

— qwertymodo
source
链接的解决方案对我来说不太好用。地图移动不流畅。
— JoseGómez2015年
1
@JoseGómez对于我来说一直很顺利：zelda.qwertymodo.com/overworld/lightworld
— qwertymodo 2015年
0

这是HenningJ-但是ios上的HenningJ使用lastValidCentre-不好，因为它很旧，所以我固定了它，使其在iOS上更好。

var mapObject = plugin_map.gmap3('get');
var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(41.3957556, -88.4345472), 
     new google.maps.LatLng(49.4010417, -78.4286389)
);
google.maps.event.addListener(mapObject, 'center_changed', function() {
    if (allowedBounds.contains(mapObject.getCenter())) {
        // still within valid bounds, so save the last valid position
        return; 
    }

    // not valid anymore => return to last valid position
     var c = mapObject.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = allowedBounds.getNorthEast().lng(),
         maxY = allowedBounds.getNorthEast().lat(),
         minX = allowedBounds.getSouthWest().lng(),
         minY = allowedBounds.getSouthWest().lat();

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

     //mapObject.setCenter(new google.maps.LatLng(y, x));
     mapObject.panTo(new google.maps.LatLng(y, x));
});
— 汤姆·安德森
source
0

如果有人感兴趣，我将发布答案，因为使用此处发布的任何其他解决方案都无法满足我的需求。

我需要的是限制地图的垂直范围（纬度），以使用户无法平移超出地球的纬度范围（〜+/- 85度），但其他任何范围也可以使用。

这种方法使用与center_changed其他地方描述的事件相同的事件，并在显示了部分禁止范围的情况下简单地固定中心。

只有设置了地图的最小缩放比例，该机制才起作用，以使缩小显示的区域永远不会超出允许范围内的区域。

工作示例：http : //jsbin.com/vizihe

function initMap() {
  // sample bounds, can be anything and goes hand in hand with minZoom
  var northBoundary = 40
  var southBoundary = -40

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 4,
    // it's important to set this to a large enough value
    // so that zooming out does not show an area larger than allowed
    minZoom: 4 
  })

  map.addListener('center_changed', function () {
    var bounds = map.getBounds();
    var ne = bounds.getNorthEast()
    var sw = bounds.getSouthWest()
    var center = map.getCenter()

    if(ne.lat() > northBoundary) {
      map.setCenter({lat: center.lat() - (ne.lat() - northBoundary), lng: center.lng()})
    }

    if(sw.lat() < southBoundary) {
      map.setCenter({lat: center.lat() - (sw.lat() - southBoundary), lng: center.lng()})
    }   
  })
}

html, body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="limit google map panning">
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
    async defer></script>
  </body>
</html>
— 西蒙妮
source
0

我知道我参加聚会的时间不晚，但截至2016年中期，似乎还没有正式的方法来限制可见区域。

有一些解决方案可以限制边界（此问题中的某些解决方案），但对我来说却有一个缺陷，因为它们没有严格限制边界以适合地图视图，因此仅限制了地图中心包含在指定范围。如果您想将边界限制为像我这样的叠加图像，则可能会导致如下所示的行为，其中在我们的图像叠加层下可见底图：

在此处输入图片说明

为了解决这个问题，我创建了一个库，该库成功限制了边界，因此您无法平移叠加层。

但是，作为其他现有解决方案，它具有“振动”问题。当用户足够积极地平移地图时，松开鼠标左键后，地图仍会继续自行平移，并逐渐变慢。我总是将地图返回边界，但这会导致振动，片刻后消失。目前无法通过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:500px; width:1000px;"></div>
     <script  type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>
展开摘要

— Matej P.
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.