Question

我正在尝试在用户拖动时同步屏幕上两个Google地图的移动。

目前我正在收听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方法将背景地图链接到前景地图。但是，只有在拖动完成后才会更新背景地图。

Answer 1

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

Answer 2

我的代码似乎可以在桌面环境中运行。

然而，地图JS API限制了它在移动环境中的回调率（我只能假设它是出于性能原因），因此每次拖动只调用center_changed一次。与台式机不同，它的呼叫频率更高。

谷歌地图v3同步拖动

2 个答案: