强制停止地图拖动[重复]答案

【问题标题】：Force stop map dragging [duplicate]强制停止地图拖动[重复]
【发布时间】：2011-03-12 18:44:15
【问题描述】：

我现在正在使用Google Maps，我希望能够禁止用户将地图拖出指定边界。

var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(49.00, 14.07),
    new google.maps.LatLng(54.50, 24.09)
);

我该怎么办？我尝试使用drag 事件但没有运气..

google.maps.event.addListener(map, 'drag', function() {
    if (
         !strictBounds.contains(map.getBounds().getNorthEast())
      || !strictBounds.contains(map.getBounds().getSouthWest())
    ) {
        // map is out of bounds here
    }
});

如何阻止用户对strictBounds 的拖拽？

【问题讨论】：

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

【解决方案1】：

您可能想改为收听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 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;

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

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

【讨论】：

感谢您的回答。我以前注意到过这种方式（但没有计算）。但是，如果他拖得更多，它仍然允许用户查看地图的其他部分。我正在寻找一种方法，可以在用户尝试访问地图的不允许区域的同时打破用户的拖拽。
@hsz：在这种情况下，您可能想监听drag 事件而不是dragend，但阻塞看起来不太好。您可能还更喜欢使用panTo 而不是setCenter。

【解决方案2】：

试试这个：

var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(49.00, 14.07),
    new google.maps.LatLng(54.50, 24.09)
);

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

    if (!strictBounds.intersects(map.getBounds()) ) {
        // map is out of bounds here
        map.setCenter(strictBounds.getCenter()); 
    }
});

这不是很理想，因为它只是将地图中心移回 strictBounds 中心，理想情况下，您会尝试计算他们试图拖过去的边界的最近边缘。捕捉到他们拖到边界之外的速度也有点慢，但这是 API 的一个问题

【讨论】：

我已经尝试过setCenter，但是如果用户没有结束拖动地图，它会导致移动不顺畅。

【解决方案3】：

这行得通，虽然有点跳动：

//  Boundaries
var southBound = 33;
var westBound = -119;
var northBound = 34;
var eastBound = -118;

// Intersect boxes for stopping drag
var topBox = new google.maps.LatLngBounds(
    new google.maps.LatLng(northBound, westBound),
    new google.maps.LatLng(northBound + 1, eastBound)
);
var rightBox = new google.maps.LatLngBounds(
    new google.maps.LatLng(southBound, eastBound),
    new google.maps.LatLng(northBound, eastBound + 1)
);
var bottomBox = new google.maps.LatLngBounds(
    new google.maps.LatLng(southBound - 1, westBound),
    new google.maps.LatLng(southBound, eastBound)
);
var leftBox = new google.maps.LatLngBounds(
    new google.maps.LatLng(southBound, westBound - 1),
    new google.maps.LatLng(northBound, westBound)
);

// Last known good center point
var lastGoodCenter = map.getCenter();

// Listen for dragging  
google.maps.event.addListener(map, 'drag', function() {
    // If the map's bounds intersect with one of the stop boxes
    if (map.getBounds().intersects(topBox) || map.getBounds().intersects(rightBox) 
        || map.getBounds().intersects(bottomBox) || map.getBounds().intersects(leftBox)){
        // Go back to the good center
        map.setCenter(lastGoodCenter);
    }else{
        // Or set this new center as good
        lastGoodCenter = map.getCenter();
    }
});

【讨论】：

使用 panTo 代替 setCenter 更流畅，但会显示您不想显示的地图部分。 =]