Информационное окно Google Maps показывает неправильный маркер

У меня есть фрагмент кода javascript, в котором я создаю маркеры и прикрепляю к ним InfoWindows, например:

for (var i = 0; i < 8; i++) {
    var marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

Но когда я нажимаю на один из маркеров, информационное окно всегда показывает только один маркер. Что я делаю неправильно?


google-maps javascript jquery google-maps-markers
person PeanutButterJelly    schedule 20.04.2011    source источник

Ответы (5)


arrow_upward
34
arrow_downward

У вашей проблемы есть очень простое решение: поместить код цикла в функцию. Ваша проблема заключается в том, что вы перезаписываете переменную marker, так что при доступе к ней в событии клика используется последняя версия этой переменной, которая является последним добавленным вами маркером.

Итак, когда вы помещаете ее в функцию, переменная находится в отдельном пространстве имен и, следовательно, не перезаписывается. Другими словами, это должно работать:

for (var i = 0; i < 8; i++) {
    createMarker(i);
}

function createMarker(i) {
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
person Herman Schaaf    schedule 20.04.2011
comment
Спасибо за ваше сообщение! Но почему каждый новый объект marker не сохраняется в первом случае? Я смущен, почему это работает, когда вы помещаете код внутри цикла в отдельную функцию. - person Maximus S; 07.03.2014
comment
Не могли бы вы взглянуть на этот пример? Он использует тот же код, что и вы написали, но вызывается из API. Информационные окна не открываются. jsfiddle.net/b20n4jbg @ Герман Шааф - person adin; 30.11.2015

arrow_upward
25
arrow_downward 

google.maps.event.addListener(Marker, 'click', function() {
    InfoWindow.open(map, this);
});

Вы должны использовать это вместо маркера, потому что маркер будет содержать значение последнего размещенного маркера.

person André Luiz    schedule 29.11.2013
comment
Спасибо, вы спасли мне жизнь :) - person Mohamed Gallah; 03.04.2017

arrow_upward
2
arrow_downward

В качестве новой опции, которой не было 7 лет назад:

все современные браузеры (то есть все браузеры, поддерживающие ECMAScript 6) поддерживают переменные с блочной областью видимости, которые определяются с помощью let заявление. let инициализирует переменную внутри заданной области, например. внутри цикла, тогда как var определяет переменные на глобальном или функциональном уровне. В вашем случае замена var на let гарантирует, что каждый маркер будет правильно инициализирован как новая переменная:

for (var i = 0; i < 8; i++) {
    let marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    let infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
person SaschaM78    schedule 28.02.2019

arrow_upward
0
arrow_downward

Попробуй это:

        // Create a marker for each place.
         marker = new google.maps.Marker({
             map: map,
             icon: icon,
             title: place.name,
             animation: google.maps.Animation.DROP,
             position: place.geometry.location
         });
         var infowindow = new google.maps.InfoWindow({
         content:'<div><strong>' + place.name + '</strong><br>' +
            'Place ID: ' + place.place_id + '<br>' +
            place.formatted_address + '</div>'
            });
        marker.addListener('click', function() {
        infowindow.open(map, this);
        });

Спасибо

person Ajay Malhotra    schedule 25.10.2017

arrow_upward

arrow_downward

person    schedule
comment
Не могли бы вы добавить контекст к вашему ответу, например, как это поможет спрашивающему? :-) - person Jonathan; 21.12.2012
comment
Я проголосовал за это 1 час назад, но при тестировании с другим контентом это открывает информационное окно несколько раз, так что в конце концов это мне не помогло, извините. - person Miguel Garrido; 07.01.2016