Google Maps Javascript API V3 - 连续平移

Mar*_*ley 0 javascript google-maps event-handling

除非用户将鼠标移到地图上,否则我试图让谷歌地图连续平滑过度.使用'idle'事件处理程序会导致波动的平移动画.使用其他事件不会给我结果.我的initPan()函数的递归只会导致页面崩溃.这里 '空闲'连续平移方法的示例.

function initialize() {
    var myOptions = {
        zoom: 5,
        center: markers.sanjose,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

    google.maps.event.addListener(map, 'idle', function() {
        initPan(map);
    });

    google.maps.event.addListener(map, 'mouseout', function() {
        stopPan(map);
    });
}

function initPan(map) {
   map.panBy(5, 0);
}

function stopPan(){
}
Run Code Online (Sandbox Code Playgroud)

Mar*_*ley 5

没有很多观点,没有评论,但如果有人遇到这种情况,这里是我的解决方案.

在通过用户事件触发重复方法时,例如panBy(),我遇到了API V3的问题.虽然V2有'moveend'事件,但它被'idle'事件取代.但是,在发生平移后,"空闲"有一个短暂的延迟.另一种选择是使用'bounds_changed'事件,但此事件每秒触发多次,导致地图永远不会加载切片(因此没有平移外观).

我终于通过向'bounds_changed'添加超时延迟解决了这个问题,清除了堆叠在多个事件触发器上的超时.这是解决问题的代码段.

google.maps.event.addListener(map, 'bounds_changed', function() {
  if (moving) {
    if (myTimeout) {
      window.clearTimeout(myTimeout);
    }
    myTimeout = window.setTimeout(initPan(map), 2200);
  }
});
Run Code Online (Sandbox Code Playgroud)

我在API论坛上找到了解决方案,你可以看到我在这里进行连续平移的一个例子.如果这没有任何意义,请查看示例中的完整代码,祝你好运.