谷歌地图v3同步拖动

Google maps v3 synchronized drag

本文关键字：拖动 同步 v3 谷歌地图      更新时间：2023-09-26

当用户拖动两个谷歌地图时，我目前正在尝试同步它们在屏幕上的移动。

目前我正在收听center_changed事件。但是，只有在拖动完成后才会调用该操作，因此第二个贴图只在拖动之后移动，而不是在拖动期间移动。

我当前的代码看起来像这个

    var mapOptions = {
      center: new google.maps.LatLng(52.287373, -1.548609),
      zoom: 12,
      // streetViewControl: false
      disableDefaultUI: true,
      // draggable: false,
      // disableDoubleClickZoom: false
    };
    mapOptions["styles"] = dayStyle;
    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

    backgroundMap = new google.maps.Map(document.getElementById("background-map"),
        mapOptions);
    google.maps.event.addListener(map, 'center_changed', function() {
        // Set backgroundMap to match actual map
        backgroundMap.panTo(map.getCenter());
    });
    google.maps.event.addListener(map, 'zoom_changed', function() {
        // Set backgroundMap zoom to be further out than actual map
        backgroundMap.setZoom((map.getZoom()-2 >= 1) ? map.getZoom()-2 : 1);
    });

但我真的想创造同样的效果http://snazzymaps.com/有我已经尝试过使用bindTo方法将背景图链接到前景图。但这也只会在拖动完成后更新背景贴图。

drag事件是您想要的，但请将其与center_changed一起使用，因为使用键盘箭头平移不会触发drag事件。

我的代码似乎可以在桌面环境中工作。

然而，maps JS API限制了它在移动环境中的回调速率（我只能假设这是出于性能原因），因此每次拖动只调用center_changed一次。与桌面上的呼叫频率高得多不同。

相关文章：