Javascript 向数百个google地图标记添加事件侦听器

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

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

$（'#map'）。在（'click'，'marker'，函数（事件）{

---

有什么方法可以做到这一点吗？

事件处理程序的连接方式只是将一个侦听器绑定到一个元素（

#map

）。有关

.on（）

如何工作的更多信息，请参阅jQuery文档：。基本上，对标记的任何和所有单击都会指向ID为

map

的元素

要完成

.on（）

技术，请尝试使用

事件

对象参数查找目标标记：

事件.目标

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

这里，我假设有一个实用工具

getMarker

，它将为给定的HTML元素返回一个GoogleMaps标记实例

---

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

这只是一个事件侦听器（因此我相信）并对冒泡或传播的事件执行操作，在委派模式下使用，不知道设备上的性能差异会是什么样子

HTML

---

在

上，对这个问题并没有直接的帮助，但我想知道你到底需要500个标记在手机应用地图上做什么。我不知道你的应用是什么，但在一个小手机屏幕上的500个标记肯定对任何人都没有用。我的第一个想法是重新考虑你的设计，一次在地图上减少标记。这不是对你问题的回答，但你如何期望用户在移动设备上使用500个标记？为什么不将彼此接近的标记组合成一个组标记，以帮助简化界面？我认为我不能用胖手指在手机上处理超过25个标记。另一种选择是热图，具体取决于你的应用程序。不，他说他目前有约500个事件侦听器绑定到约500个元素，他想要一个涉及将事件绑定到单个父元素的解决方案，并以伪代码为例，希望有人填补

标记的空白。uniqueInfo

我显示的代码就是我想要的。添加侦听器的正常方法是谷歌地图上的标记是在所有标记之间循环，并为每个标记添加一个侦听器。是的，请阅读“直接和委派”部分事件。基本上你想做一个委派的事件。但是我同意。这样做可能会有点帮助，但大部分延迟是从所有标记开始的。我不能真正让它工作。标记是使用maps api动态添加的，我不能在dom中引用它们。我将“标记”放在.on（）中事件，因为我不知道还能做什么。您好。这个答案对于Google地图标记不正确，因为这些标记不是DOM元素，只存在于Google地图中。

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

<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>

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