向数百个谷歌地图标记添加事件监听器答案

【问题标题】：Adding event listeners to hundreds of google maps markers向数百个谷歌地图标记添加事件监听器
【发布时间】：2013-04-29 21:27:09
【问题描述】：

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

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

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

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

有没有办法做到这一点？

【问题讨论】：

对这个问题并没有真正的直接帮助，但我想知道在移动应用地图上你可能需要 500 个标记来做什么......我不知道你的应用是什么，但是当然，一个小手机屏幕上的 500 个标记对任何人都没有用.. 我的第一个想法是重新考虑您的设计，以减少地图上的标记。
不是您问题的答案，但如何期望用户在移动设备上使用 500 个标记？为什么不将彼此靠近的那些组合成一个组标记以帮助简化界面？我认为我的胖手指不能在手机上处理超过 25 个标记。
stackoverflow.com/about
另一种选择，取决于您的应用，可以是热图。

标签： javascript google-maps google-maps-markers

【解决方案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 地图标记实例。

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

【讨论】：

no..他说他目前有大约 500 个事件侦听器绑定到大约 500 个元素，他想要一个解决方案，涉及将事件绑定到单个父元素，并以该伪代码为例希望有人填写marker.uniqueInfo的空白
我展示的代码是我想要的。向谷歌地图上的标记添加侦听器的常规方法是遍历所有标记并为每个标记添加一个侦听器。
是的，请阅读“直接和委托”事件部分。基本上你想做一个委托事件。但我同意..这样做可能会有所帮助，但大部分滞后都来自所有标记......
我真的无法让它工作。标记是使用 maps api 动态添加的，我无法在 dom 中引用它们。我在 .on() 事件中添加了“标记”，因为我不知道还能做什么。
嗨。这个答案对于谷歌地图标记是不正确的，因为标记不是 DOM 元素，只存在于谷歌地图中。

【解决方案2】：

这只是 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

【讨论】：