Google지도 마커 이벤트가 잘못된 정보를 표시합니다.

Question

Google지도 웹 앱에 문제가 있습니다. 마커를지도에 추가하려고하는데 사용자가 마커를 클릭하면 마커 이름이 나타납니다. 배열을 통해

var citymap = {}; 
     citymap['edinburgh'] = { 
     center: new google.maps.LatLng(55.934120, -3.226569), 
     population: 284, 
     image:clueImage, 
     color: '#ff0000', 
     elementId:'clue1' 
     }; 
     citymap['clue2'] = { 
     center: new google.maps.LatLng(55.970783, -3.164594), 
     population: 284, 
     image:clueImage, 
     color: '#ff0000', 
     elementId:'clue2' 
     } 
     citymap['clue4'] = { 
     center: new google.maps.LatLng(55.939583, -3.202092), 
     population: 284, 
     image:clueImage, 
     color: '#ff0000', 
     elementId:'clue3' 
     } 
     citymap['clue9'] = { 
     center: new google.maps.LatLng(0, 0), 
     population: 284, 
     image:clueImage, 
     color: '#ff0000', 
     elementId:'clue1' 
     } 

그때 루프 및지도에 마커를 추가 :

나는과 같이 배열의 각 마커에 대한 정보를 저장

for (var city in citymap) { 

     var playerMarker = new google.maps.Marker({ 
     position: citymap[city].center, 
     map: map, 
     icon: citymap[city].image 
     }); 

     google.maps.event.addListener(playerMarker, "click", function() { 
     var elementConnected = citymap[city].elementId; 
    console.log(elementConnected); 
    }); 

     } 

모든 것이 의도 한대로 그러나 작동 마커 중 하나를 클릭하면 배열의 마지막 마커 값이 모두 기록됩니다. 루프가 끝난 곳이기 때문에 이것이 알지만이 작업을 수행하는 방법을 생각할 수는 없습니다.

도움이 매우 도움이 될 것입니다.

Answer 1

이것은 사람들이 가지고있는 자바 스크립트에서 보편적 인 "클로저"문제라고 생각합니다. 누군가가이 일을 더 나은 방법을 제공 할 수 있지만, 난 당신이 같은 필요가 있다고 생각 : 아마도 이것이 당신이 click 이벤트 내부에서하고있는 다른 무엇에

google.maps.event.addListener(playerMarker, "click", (function() { 
    return function() { 
     var elementConnected = citymap[city].elementId; 
     console.log(elementConnected); 
    }; 
})(city)); 

또는 가능하다면, 따라 :

google.maps.event.addListener(playerMarker, "click", (function(elementId) { 
    return function() { 
     var elementConnected = elementId; 
     console.log(elementConnected); 
    }; 
})(citymap[city].elementId));