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

时间:2013-04-29 21:27:09

标签: javascript google-maps google-maps-markers

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

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

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

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

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

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

2 个答案:

答案 0 :(得分:3)

附加事件处理程序的方式只是将一个侦听器绑定到一个元素(#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标记实例。

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

答案 1 :(得分:0)

这只是一个事件监听器(我相信)并且在委派模式下使用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