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

我正在使用Google地图javascript api v3。我在地图上设置了大约500个标记。当我在移动设备上使用地图时，在移动地图并点击标记时存在显着的滞后。我相信这个滞后是由500个标记500个事件监听器引起的。向数百个Google地图标记添加事件侦听器

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

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

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

有没有办法做到这一点？

来源

2013-04-29 Conrad Lewis

没有真正直接有用的问题，但我想知道究竟你可能需要500点上的标记一个移动应用程序的地图......我不知道你的应用程序是什么，但肯定在一个小电话屏幕上的500个标记不会对任何人有用..我的第一个想法是重新考虑你的设计有le一次在地图上标记ss标记。 – 2013-04-29 21:36:28

不是您的问题的答案，但期望用户如何在移动设备上使用500个标记？为什么不将那些彼此靠近的组合到一个组标记中以帮助简化界面？我不认为我可以用我的胖手指在手机上处理超过25个标记。 – 2013-04-29 21:36:46

http://stackoverflow.com/cn – Xotic750 2013-05-11 09:27:00

事件处理程序附加的方式仅将一个侦听器绑定到一个元素（#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元素。

知道，有可能是从这样的结合事件的一些性能提升，但它仍然可能不一样快，你只想由于地图上的标记的绝对数量。

来源

2013-04-29 21:41:44

no..he是说，他目前拥有势必〜500元〜500个事件侦听器，他希望涉及的事件结合到一个单一的父元素的解决方案，并给该伪代码作为一个例子，希望有人来填补空白for'marker.uniqueInfo' – 2013-04-29 21:43:58

我展示的代码就是我想要的。听众加入标记一个谷歌地图上的正常途径是通过所有标记环和一个监听器添加到每个人。 – 2013-04-29 21:44:10

谢谢，我刚刚意识到并做了一个编辑。 – 2013-04-29 21:45:13

这是只有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-29 22:07:10 Xotic750

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

回答

相关问题