向數百個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地圖標記添加事件偵聽器

回答

相關問題