我认为我的解决方案“又快又脏”。我认为它应该是可行的,通过使用插件。
无论如何,我认为结果是您所需要的。我展示的代码在里面初始化;1 个额外功能和 zoom_changed 和 dragend 的替换
google.maps.event.addListener(map, "zoom_changed",function() {
var zoom = map.getZoom();
$('#zoom').text(zoom);
$('#marker_count').text(mgr.getMarkerCount(zoom));
timer = setTimeout(visibleMarkersInTable, 400);
});
google.maps.event.addListener(map, "dragend", function() {
timer = setTimeout(visibleMarkersInTable, 400);
});
var timer;
function visibleMarkersInTable () {
clearTimeout(timer); // make sure you don't check, while the user is panning or zooming.; so this blocks a lot of temporary checks
$('table tbody').empty();
for (i in gMarkers) {
var markerVisible = gMarkers[i].map ? true : false;
if(markerVisible) {
// mind you, the marker might be on the map, but just outside of the boundaries.
// so let's check those
if (map.getBounds().contains(gMarkers[i].getPosition()) ) {
$('table tbody').append('<tr id="' + gMarkers[i].id + '"><td>' + gMarkers[i].title + '</td><td>' + gMarkers[i].getPosition().lat() + '</td><td>' + gMarkers[i].getPosition().lng() + '</td></tr>');
}
}
}
}
随意篡改 setTimeout 中的 400 毫秒延迟;将其设置为适合您的任何内容。尤其是当您有数百个标记时。不知道这会变得多慢。