如何限制谷歌地图APIV3中的平移?-HowdoIlimitpanninginGooglemapsAPIV3?

87  

I guess I'm a little bit late to the party, but since this was exactly what I needed just now AND I improved on it, I thought I'd post an answer anyway.

我想我在聚会上有点晚了，但既然这正是我现在需要的，而且我在这方面有所改进，我想我还是会发布一个答案的。

With both the answers of Daniel Vassallo and brendo, the user can still use the pan-control (if it's activated) to move away from the wanted area. The thing @Yauhen.F mentioned in a comment.

在Daniel Vassallo和brendo的回答中，用户仍然可以使用泛控制(如果它被激活)离开需要的区域。@Yauhen的东西。F在评论中提到。

So instead of using the dragend event, I use the center_changed event. This is continuously fired during dragging and every time someone uses the pan control.

因此，我使用的不是dragend事件，而是center_changed事件。这是在拖拽和每次有人使用pan控件时持续触发的。

// 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);
});

By saving the last valid position continuously during the dragging, the movement will just stop once it's out of bounds, instead of yerking back once the dragging ended. ......

通过在拖拽过程中持续保存最后一个有效位置，当拖拽结束时，移动将停止，而不是向后移动

20  

The trick is to listen to the dragend event, and if the map is dragged outside the allowed bounds, move it back inside. If you define your allowed bounds as a LatLngBounds object, you can use the contains() method, since it returns true if the given lat/lng argument is within the bounds.

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

It is also important to limit the zoom level, but it seems you are already doing this.

限制缩放比例也很重要，但看起来你已经在这么做了。

Therefore, you may want to try the following example:

因此，您可能想尝试以下示例: