Question

function initialize() {
    var latlng = new google.maps.LatLng(37.7702429, -122.4245789);

    var myOptions = {
      zoom: 3,
      center: latlng,
      disableDefaultUI: false,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    // Limit panning
    // Latitude bounds for map, longitude not important
    var southWest = new google.maps.LatLng(-85.000, -122.591);
    var northEast = new google.maps.LatLng(85.000, -122.333);
    var allowedBounds = new google.maps.LatLngBounds(southWest, northEast);

    // Add a move listener to restrict the bounds range
    google.maps.event.addListener(map, "center_changed", function() {checkBounds(); });

    //If zoom out at bound limit then map breaks; center doesn't change but bounds get broken. Listen for zoom event and try to correct bound break. **Doesn't Work**
    google.maps.event.addListener(map, 'zoom_changed', function() {checkBounds(); });

    // If the map position is out of range, move it back
    function checkBounds() {

      // Perform the check and return if OK
      if ((allowedBounds.getNorthEast().lat()>(map.getBounds().getNorthEast().lat()))&&(allowedBounds.getSouthWest().lat()<(map.getBounds().getSouthWest().lat()))) {
        lastValidCenter = map.getCenter();
        lastValidZoom = map.getZoom();
        return;
      }

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

基本上我不希望用户能够看到地图之外的任何内容，因此我限制了纬度范围。工作正常。

问题在于，如果我们要查看的用户接近界限，然后缩小以使中心不会改变，但现在视口界限超出界限，则无法正确并且地图变得无法使用。

您对天才所能提供的任何帮助都非常感激。

Answer 1

好的，所以非常简单。 zoom_changed事件的行为不符合预期，并且自己的bounds_changed不能令人满意。此地图不会通过平移或缩放超出范围，如果您希望用户只看到地图而没有灰色背景，则非常适合。如果您的用户希望将地图置于高纬度和低缩放级别的中心，那就不太好了。过了那座桥。这是代码：

    // The allowed region which the whole map must be within
    var southWest = new google.maps.LatLng(-85.000, -122.591);
    var northEast = new google.maps.LatLng(85.000, -122.333);
    var allowedBounds = new google.maps.LatLngBounds(southWest, northEast);

    // Add listeners to trigger checkBounds(). bounds_changed deals with zoom changes.
    google.maps.event.addListener(map, "center_changed", function() {checkBounds(); });
    google.maps.event.addListener(map, 'bounds_changed', function() {checkBounds(); });

    // If the map bounds are out of range, move it back
    function checkBounds() {
      // Perform the check and return if OK
      if ((allowedBounds.getNorthEast().lat()>(map.getBounds().getNorthEast().lat()))&&(allowedBounds.getSouthWest().lat()<(map.getBounds().getSouthWest().lat()))) {
        lastValidCenter = map.getCenter();
        lastValidZoom = map.getZoom();
        return
      }
      // not valid anymore => return to last valid position
      map.panTo(lastValidCenter);
      map.setZoom(lastValidZoom);

Answer 2

不要在工作的应用程序上尝试这个，或者在生产中的某个地方创建新的地图本地服务器不同的测试程序。

PANING谷歌地图一直都是马车，特别是在边缘或靠近任何谷歌图标的平移缩放等。

你需要回到基础忘记函数和脚本只需要简单的IF语句

类似于此，我不记得我今年做过什么，这就是要点。

1）存储4个变量来表示地图上的四行

左边西边右边东边顶边北底部南边

另一个跟踪中心LAT LNG（起始中心与加载时显示的第一个地图相同）

我，如果你向左或向西平移X，你会使中心/中心（对于美国人）等于当前中心加上平移X同样所有其他平移方向增加或减去所需的纬度和经度

测试你没有达到优势（减去测试和错误的任何数量）金额导致谷歌错误出现在边缘附近的图标

或以另一种方式使您正在测试的LAT和LNG小于显示的地图

如果显示的地图的左边或西边是经度x停止平移（不再做了调整到你的中心VARIABLE在X - 10经度相同的所有其他3个边缘加上或减去所需的数量

上边缘北将将在a 无论你选择什么，底部边缘南边都将处于格子状位置

左边西边将在经度b 右边的东边将在经度b-无论你选择什么

它们都在显示的地图中，但是说的纬度或经度是显示地图的0.5或

如果你的平底锅穿过你的任何细线设置你的中心变量向前或向前并且你向前或向前平移，比如说经纬度为0.1到0.5的观察者只会看到一个轻微的颠簸回到原位在你的预设de =地图上的四条线之外。

代码就像非常基本的学习者代码一样，但它会起作用。

至少它在经过一些试验和错误以及通常的调试错字错误等后才为我做了。

采用这种方法，你可以控制而不是谷歌脚本可能有未记录的代码，导致你遇到的问题，因为谷歌不知道你想要实现什么，只有你知道。

对于任何问题，我们都没有给出代码它不难看起来像新手代码而不是高级用户喜欢的代码

这就像制作一个简单的学习者程序，如果你向上或向下移动或对角线你调整中心LAT LNG，那就是存储当前中心（这是你自己的变量而不是谷歌变量）如果是中心（存储在你自己的变量中））穿过你的一条线停止平移并将Gmap中心向上或向下向前或向下调整一点加上或减去一小部分LAT或LNG

Answer 3

谢谢，你的脚本崩溃了我的Mozilla :-)这可能是因为zoom_changed事件没有在getCenter()调用中给你正确的中心。这是zoom_changed event handler doesn't give correct bounds已知的问题，因此也可能适用于中心。我试图修改你的代码只处理bounds_changed事件（而不是zoom_changed和center_changed），问题消失了！但它也不是理想的表现。也许最好看看this example of range limitation，它的效果非常好。

谷歌地图API V3：缩小打破限制;解决方法吗？

3 个答案: