Проблемы с областью действия и закрытием в JavaScript с использованием Google Maps

У меня есть несколько маркеров карты Google, и я пытаюсь добавить событие клика к каждому, но по какой-то причине отображаемый текст одинаков для каждого маркера :(

Я думаю, что это проблема с моими закрытиями JS (закрытие - это то же самое, что и область действия в JS?)

Карта с маркерами, где возникает проблема, находится здесь: http://www.comehike.com/outdoors/parks/trailhead.php

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

Спасибо, Алекс


google-maps javascript google-maps-markers
person Genadinik    schedule 17.03.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вот демонстрация JSFiddle:

Я создал фиктивный массив с информацией, прикрепленной к именованным маркерам. Затем мы создаем глобальную переменную infowindow для хранения одного экземпляра вашего информационного окна. Это информационное окно появится рядом с маркером, по которому щелкнули.

var map;
var global_markers = [];    
var markers = [[37.09024, -95.712891, 'trialhead0'], [-14.235004, -51.92528, 'trialhead1'], [-38.416097, -63.616672, 'trialhead2']];

var infowindow = new google.maps.InfoWindow({});

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

    for (var i = 0; i < markers.length; i++) {
        // obtain the attribues of each marker
        var lat = parseFloat(markers[i][0]);
        var lng = parseFloat(markers[i][1]);
        var trailhead_name = markers[i][2];

        var myLatlng = new google.maps.LatLng(lat, lng);

        var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
        });

        marker['infowindow'] = contentString;

        global_markers[i] = marker;

        google.maps.event.addListener(global_markers[i], 'click', function() {
            infowindow.setContent(this['infowindow']);
            infowindow.open(map, this);
        });
    }
person KJYe.Name 葉家仁    schedule 17.03.2011
comment
Я только что попробовал, и та же проблема все еще остается. Каждое всплывающее окно html содержит одни и те же данные после нажатия на него. :( - person Genadinik; 17.03.2011
comment
@Genadinik, возможно, проблема не в информационном окне, а в содержании. - person KJYe.Name 葉家仁; 17.03.2011
comment
Только что проверил базу данных и отладил содержимое, и оно определенно должно быть другим. - person Genadinik; 17.03.2011
comment
@Genadinik я упростил ваши коды в этом jsfiddle jsfiddle.net/kjy112/ZLuTg, и, кажется, это работает хорошо... я понял почему. я только что просмотрел ваш код, удалите var infoWindow = new google.maps.InfoWindow({ content: contentString }); - person KJYe.Name 葉家仁; 17.03.2011
comment
@Genadinik я только что обновил демо. Таким образом, у вас будет открыто только одно информационное окно, но с другим содержимым, связанным с маркером. посмотри. - person KJYe.Name 葉家仁; 17.03.2011

arrow_upward
2
arrow_downward

Вы правы, это проблема с областью действия и замыканиями. Вы определяете infoWindow в глобальной области видимости, а затем используете его внутри своего обработчика onclick. Это означает, что вы всегда будете открывать окно infoWindow, которое вы создали в последней итерации цикла for.

Измените этот код:

infoWindow = new google.maps.InfoWindow({
  content: contentString
});

к этому:

var infoWindow = new google.maps.InfoWindow({
  content: contentString
});
person tilleryj    schedule 17.03.2011
comment
Я только что сделал это, но это не решило проблему :( - person Genadinik; 17.03.2011
comment
Точно такая же проблема. Это исправление, похоже, не имело никакого эффекта. - person Genadinik; 17.03.2011

arrow_upward
1
arrow_downward

вам нужно добавить это

 <script type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false">
</script>

в противном случае он будет продолжать говорить, что Google не найден.

person andy    schedule 21.07.2011