google-maps - 使用 'idle' 监听器更新 Maps V3。打开 InfowWindow 会触发此操作并隐藏标记

Question

这将加载 map ，获取新结果并删除旧结果:

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

那部分效果很好。

当我点击一个标记打开它的 InfoWindow 时，我的麻烦就来了。打开 InfoWindow 会使 map 围绕标记重新居中，这会从上方触发 Listener，然后重置 map ，隐藏 InfoWindow。

这是我创建标记/信息窗口的方式:

var infowindow = new google.maps.InfoWindow({});

function makeMarker(LatLong, markerName) { //this is called from a loop 
    var marker = new google.maps.Marker({
        position: LatLong,
        map: map,
        title:markerName,
        content: "html for the infoWindow"
    });

    //Detect marker click
    google.maps.event.addListener(marker, "click", function() {
        infowindow.setContent(this.content);
        infowindow.open(map, marker);
    });
} 

任何见解都非常感谢。

Answer 1

updateMap可能是根本问题所在。当您更新 map 时，您真的不需要删除每个标记并再次添加它；相反，您想删除不再需要的那些并添加您需要的那些。 (诚​​然，第一种策略要简单得多，并且适用于大多数用例。)

或者，我会探索两种方法:

存储一个全局变量，如 markerClick并实现类似的东西:

google.maps.event.addListener(map, 'idle', function() {
  if(!markerClick){
    updateMap();
    markerClick = false;
  }
});



google.maps.event.addListener(marker, "click", function() {
  markerClick = true;
  infowindow.setContent(this.content);
  infowindow.open(map, marker);
});

一个 ceveat 是一个真正的快速黑客，如果点击了一个不会触发空闲事件的标记(即一个在中心或其他地方)，肯定会引起麻烦。

不要使用 idle了。 Events喜欢 dragend和 zoom_changed可能会更好地捕获您正在寻找的特定用户交互。