在谷歌地圖上創建多個形狀的addListener點擊事件

看看這段代碼：這在相同的位置在地圖上創建四個圈，它爲每個人的addListener click事件太多，但我可以點擊最後一個。我想以一種方式修復它，我可以點擊它們來爲每一個setEditable（true）。在谷歌地圖上創建多個形狀的addListener點擊事件

<!DOCTYPE html> 
<html> 
<head> 
<script 
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
</script> 

<script> 
var selectedShape; 

function clearSelection() 
{ 
    if(selectedShape) 
    { 
     selectedShape.setEditable(false); 
     selectedShape = null; 
    } 
} 

function setSelection(shape) 
{ 
    clearSelection(); 
    selectedShape = shape; 
    shape.setEditable(true);  
} 
</script> 


<script> 
var amsterdam=new google.maps.LatLng(52.395715,4.888916); 
function initialize() 
{ 
    var mapProp = {center:amsterdam, zoom:7, mapTypeId:google.maps.MapTypeId.ROADMAP}; 
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

    var myArray = []; 
    var myCity; 

    for(var i = 0; i < 4; i++) 
    { 
     myCity = new google.maps.Circle({ 
      center:amsterdam, 
      radius:20000, 
      strokeColor:"#0000FF", 
      strokeOpacity:0.8, 
      strokeWeight:2, 
      fillColor:"#0000FF", 
      fillOpacity:0.4 
      }); 


    myArray.push(myCity); 

    google.maps.event.addListener(myCity, 'click', function() {setSelection(myCity)}); 
    myArray[i].setMap(map); 

    } 

} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
<div id="googleMap" style="width:500px;height:380px;"></div> 
</body> 
</html>

來源

2013-10-30 UserMat

我認爲這個問題是因爲使用的循環。 – UserMat

是的，您需要使用閉包來防止這種情況的發生。你循環4次，更新'myCity'是什麼。所以你最終重新定義了事件監聽器4次，並且它最終顯然只適用於你的最後一個圈子。 – duncan

也是我不完全相信你怎麼想到這個工作 - 在同一位置4個相同大小的圓。你怎麼知道你點擊了哪一個？它肯定會在堆棧頂部的一個上運行。我能理解，如果你有4圈在不同的城市 – duncan

使用this而不是myCity：

google.maps.event.addListener(myCity, 'click', function() { 
    setSelection(this) 
});

使用setSelection(myCity)將把創建的最後myCity。

來源

2013-10-30 10:14:38 davidkonrad

我是首發。你能告訴我這是什麼「這個」嗎？ – UserMat

我的意思是它指向什麼？ – UserMat

這裏'this'指向本地範圍，實際被點擊（或傳遞給事件處理程序）的對象（myCity） - 使用myCity你會意外參考myCity在外面範圍（最終在全球範圍內）時，最後myCity在您的循環中創建。我不是那麼好，用英語描述這樣的事情 - 這裏是什麼'this'是根據不同的情況http://stackoverflow.com/questions/3127429/javascript-this-keyword一個很好的答案 – davidkonrad

在谷歌地圖上創建多個形狀的addListener點擊事件

回答

相關問題