我正在使用谷歌地图javascript api v3。我在地图上设置了大约500个标记。当我在移动设备上使用地图时,在移动地图并单击标记时会出现明显的延迟。我相信这种滞后是由500个标记的500个事件监听器引起的。
我想将1个事件监听器绑定到可以处理所有地图标记点击的地图容器,如下所示(使用jquery):
$('#map').on('click', 'marker', function(event) {
alert('marker clicked: ' + marker.uniqueInfo);
});
alert('marker clicked: ' + marker.uniqueInfo);
});
有没有办法实现这个目标?
答案 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);
});
上