1

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

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

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

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

有没有办法做到这一点？

4

2 回答 2

3

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

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

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

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

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

于 2013-04-29T21:41:44.740 回答
0

这只是 1 个事件侦听器（所以我相信）并作用于冒泡或传播的事件，在委托模式下使用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 上

于 2013-04-29T22:07:10.087 回答