google maps api - перезатирается event "click" для маркеров
!В цикле создаются маркеры. В следующем цикле навешиваются события "click" на каждый маркер. Но в итоге для всех маркеров будет событие "click" заданное последнему маркеру - "marker: 3"
Подскажите кто знает - в чем проблема и как исправить? <html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(50.456501,30.559033),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:12,
scaleControl: true
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
//создаем маркеры
var markers =[[50.468077,30.562216],[50.459307,30.536864],[50.442119,30.578020]];
var LatLng; var marker = [];
for (i=0; i<markers.length; i++){
LatLng = {lat: markers[i][0], lng: markers[i][1]};
marker[i] = new google.maps.Marker({
position: LatLng,
map: map
});
}
//навешиваем событие "click" на каждый маркер
for (i=0; i<marker.length; i++) marker[i].addListener("click",function(event){alert('marker: '+i)});
}
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:400px; position: absolute; left: 0; right:0; margin: auto;"></div>
</body>
<script type="text/javascript">initialize();</script>
</html>
|
addListener - это аналог addEventListener из какого-то фреймворка или ошибка? :)
|
Цитата:
Пример для одного маркера https://developers.google.com/maps/d...t-simple?hl=ru |
Тут вся беда в цикле. addListener берет значение из i для каждого маркера уже после выполнения скрипта. i к этому времени неизменна 3. Так и получается что у всех обработчиков одинаковый номер :)
|
В общем нашел решение - надо код
//навешиваем событие "click" на каждый маркер
for (i=0; i<marker.length; i++) marker[i].addListener("click",function(event){alert('marker: '+i)});
заменить на //навешиваем событие "click" на каждый маркер
for (i=0; i<marker.length; i++){
marker[i]["i"] = i;
marker[i].addListener("click",function(){alert('marker: '+this.i)});
}
|
shurik_shink,
использовать не for а forEach и прочитать Пример ошибочного использования |
shurik_shink,
Нашел похожее решение <html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(50.456501, 30.559033),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 12,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
//создаем маркеры
var markers = [[50.468077, 30.562216], [50.459307, 30.536864], [50.442119, 30.578020]];
var LatLng; var marker = [];
for (i = 0; i < markers.length; i++) {
LatLng = { lat: markers[i][0], lng: markers[i][1] };
marker[i] = new google.maps.Marker({
position: LatLng,
map: map,
index: i
});
}
//навешиваем событие "click" на каждый маркер
var message = ['marker:0','marker:1','marker:2','marker:3','marker:4','marker:5'];
for (i = 0; i < marker.length; i++) marker[i].addListener("click", function (event) { alert(message[this.index]) });
}
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:400px; position: absolute; left: 0; right:0; margin: auto;"></div>
</body>
<script type="text/javascript"> initialize();</script>
</html>
|
| Часовой пояс GMT +3, время: 11:54. |