Проблемы объема и закрытия в JavaScript с помощью Google Maps - PullRequest
Новая
       4

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

1 голос
/ 17 марта 2011

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

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 17 марта 2011

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

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

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

к этому: 

var infoWindow = new google.maps.InfoWindow({
  content: contentString
});
1 голос
/ 21 июля 2011

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

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

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

1 голос
/ 17 марта 2011

Вот демо 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);
        });
    }
...