Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.04.2016, 10:14
Аспирант
Отправить личное сообщение для shurik_shink Посмотреть профиль Найти все сообщения от shurik_shink
 
Регистрация: 22.05.2015
Сообщений: 35

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>
Ответить с цитированием
  #2 (permalink)  
Старый 26.04.2016, 13:56
Кандидат Javascript-наук
Отправить личное сообщение для aklis Посмотреть профиль Найти все сообщения от aklis
 
Регистрация: 27.04.2015
Сообщений: 99

addListener - это аналог addEventListener из какого-то фреймворка или ошибка?
Ответить с цитированием
  #3 (permalink)  
Старый 26.04.2016, 14:05
Аспирант
Отправить личное сообщение для shurik_shink Посмотреть профиль Найти все сообщения от shurik_shink
 
Регистрация: 22.05.2015
Сообщений: 35

Сообщение от aklis Посмотреть сообщение
addListener - это аналог addEventListener из какого-то фреймворка или ошибка?
да, библиотеки http://maps.googleapis.com/maps/api/js


Пример для одного маркера
https://developers.google.com/maps/d...t-simple?hl=ru
Ответить с цитированием
  #4 (permalink)  
Старый 26.04.2016, 14:22
Кандидат Javascript-наук
Отправить личное сообщение для aklis Посмотреть профиль Найти все сообщения от aklis
 
Регистрация: 27.04.2015
Сообщений: 99

Тут вся беда в цикле. addListener берет значение из i для каждого маркера уже после выполнения скрипта. i к этому времени неизменна 3. Так и получается что у всех обработчиков одинаковый номер
Ответить с цитированием
  #5 (permalink)  
Старый 26.04.2016, 14:40
Аспирант
Отправить личное сообщение для shurik_shink Посмотреть профиль Найти все сообщения от shurik_shink
 
Регистрация: 22.05.2015
Сообщений: 35

В общем нашел решение - надо код
//навешиваем событие "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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

shurik_shink,
использовать не for а forEach и прочитать Пример ошибочного использования
Ответить с цитированием
  #7 (permalink)  
Старый 26.04.2016, 14:49
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
Вытащить картинку из JSON для Google Maps claudsp jQuery 0 29.07.2011 01:16
Приложение на API Google Maps tomAlba Работа 0 29.01.2011 15:52
Google Maps plugin InviS jQuery 0 06.10.2010 14:17