Форум

shurik_shink · #1 (**permalink**) 26.04.2016, 10:14

!В цикле создаются маркеры. В следующем цикле навешиваются события "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>

aklis · #2 (**permalink**) 26.04.2016, 13:56

addListener - это аналог addEventListener из какого-то фреймворка или ошибка?

shurik_shink · #3 (**permalink**) 26.04.2016, 14:05

Сообщение от aklis

addListener - это аналог addEventListener из какого-то фреймворка или ошибка?

да, библиотеки http://maps.googleapis.com/maps/api/js

Пример для одного маркера
https://developers.google.com/maps/d...t-simple?hl=ru

aklis · #4 (**permalink**) 26.04.2016, 14:22

Тут вся беда в цикле. addListener берет значение из i для каждого маркера уже после выполнения скрипта. i к этому времени неизменна 3. Так и получается что у всех обработчиков одинаковый номер

shurik_shink · #5 (**permalink**) 26.04.2016, 14:40

В общем нашел решение - надо код

//навешиваем событие "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)});
	}

рони · #6 (**permalink**) 26.04.2016, 14:46

shurik_shink,
использовать не for а forEach и прочитать Пример ошибочного использования

Dilettante_Pro · #7 (**permalink**) 26.04.2016, 14:49

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>

Форум

Справочник

Discord чат

Курсы javascript