Question

我正在使用谷歌地图javascript api v3。我在地图上设置了大约500个标记。当我在移动设备上使用地图时，在移动地图并单击标记时会出现明显的延迟。我相信这种滞后是由500个标记的500个事件监听器引起的。

我想将1个事件监听器绑定到可以处理所有地图标记点击的地图容器，如下所示（使用jquery）：

$('#map').on('click', 'marker', function(event) {



    alert('marker clicked: ' + marker.uniqueInfo);
});

alert('marker clicked: ' + marker.uniqueInfo); });

有没有办法实现这个目标？

Answer 1

附加事件处理程序的方式只是将一个侦听器绑定到一个元素（#map）。有关.on()工作原理的更多信息，请参阅jQuery文档：http://api.jquery.com/on/。基本上，标记的任何和所有点击都会冒充ID为map的元素。

要完成.on()技术，请尝试使用event对象参数查找目标标记：event.target。

$('#map').on('click', 'marker', function(event) {
    var marker = getMarker(event.target);
    alert('marker clicked: ' + marker.uniqueInfo);
});

在这里，我假设有一些实用程序getMarker将返回给定HTML元素的Google Maps标记实例。

请注意，通过这种方式绑定事件可能会有一些性能提升，但由于地图上标记的数量庞大，它仍然可能没有您想要的那么快。

Answer 2

这只是一个事件监听器（我相信）并且在委派模式下使用jQuery.on对冒泡或传播事件起作用，不知道设备上的性能差异是什么。

HTML

<div id="map">
    <div class="marker">1</div>
    <div class="marker">2</div>
    <div class="marker">3</div>
    <div class="marker">4</div>
    <div class="marker">5</div>
    <div class="marker">6</div>
    <div class="marker">7</div>
    <div class="marker">8</div>
    <div class="marker">9</div>
</div>

javascipt的

$(document).on('click', '#map .marker', function (event) {
    alert('marker clicked: ' + event.target.textContent);
});

在jsfiddle

上

将事件侦听器添加到数百个Google地图标记中

2 个答案: