Помоги мне исправить мой цикл

Question

Редактировать: обновленный код после изменений

У меня есть цикл for, который создает маркеры для карты Google.У меня проблема в том, что я создаю некоторые информационные окна (всплывающие пузырьки, когда вы нажимаете на местоположение), которые мне нужно интегрировать в цикл.

В настоящее время у меня уже есть infowindow1-4 и contentMarker1-4 вне цикла.Что мне нужно, так это сказать циклу, чтобы он использовал правильный, что должно быть легко, поскольку у меня есть счетчик i, но я не могу заставить его работать, поэтому я вернулся к началу.Если бы кто-то мог указать мне правильное направление относительно направления каждого маркера к правильному информационному окну в addListener, я был бы очень счастлив.

for (var i = 0; i < locations.length; i++) {
            var beach = locations[i];
            var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                title: beach[0],
                zIndex: beach[3],
                animation: google.maps.Animation.DROP

            });

            google.maps.event.addListener(marker, 'click', (function(infoWindow) {
                return function() {
                    alert(myLatLng[i]);
                    map.setZoom(9); 
                    map.setCenter(myLatLng); 
                    if (currentInfoWindow != null) { 
                        currentInfoWindow.close(); 
                    }
                    infoWindow.open(map, marker);
                    currentInfoWindow = infoWindow;             
                }
            })(infoWindow[i]));

          }

Answer 1

Если вы хотите сослаться на глобальную переменную, используя другую переменную для получения ее имени, вы можете сделать

window['infoWindow'+i]

, что точно так же, как

window.infoWindo1

, когда i = 1, и все глобальные переменные находятся в объекте window.Теперь ваши переменные вполне могут быть не глобальными, и, честно говоря, независимо от того, являются ли они , действительно ли они являются, я не думаю, что код был бы очень аккуратным.

Это, безусловно,Желательно, чтобы ваши информационные окна находились в массиве, чтобы вы могли просто ссылаться на них как:

infoWindow[i]

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

Чтобы обойти это, вы должны создать локальную область видимости для каждого прослушивателя кликов, который выназначаем, что инкапсулирует значение вопроса, как оно есть при назначении события:

google.maps.event.addListener(marker, 'click', (function(infoWin) {
    return function() {

        // your click listener here
        // you can reference the current info window as infoWin

    }
})(infoWindow[i]));

Answer 2

Вместо того, чтобы называть ваши информационные окна "infoWindow1", "infoWindow2" и т. Д., Создайте переменную-массив для ваших окон, а затем используйте индексы для этого:

var infoWindow = [];
var contentMarker = [];
infoWindow[0] = ...
...

это избавит от необходимости eval или любой другой ужасный способ выбора, какая переменная окна должна быть обновлена.

Answer 3

Возможный способ сделать это с помощью jquery ...

// pass in a collection of data/ array
function initializeMap(data) {

       //define map config... including start location

        // set the marker for each location (recursive jquery function)
        $.each(mapData.Details, function(i, location) {
            setupLocationMarker(map, location);
        });
    }

    // actual function used to display markers on the map
    function setupLocationMarker(map, location) {
        // create a marker
        var latlng = new google.maps.LatLng(location.LatLng.Latitude, location.LatLng.Longitude);
        var marker = new google.maps.Marker(latlng);
        map.addOverlay(marker);
        // add a marker click event
        google.maps.Event.addListener(marker, "click", function(latlng) {

            // open the info window with the location name
            map.openInfoWindow(latlng, $("<b></b>").text(location.Name + " " + location.Postcode)[0]);
        });

    }

Answer 4

проблема, которую вы наблюдаете, называется закрытием.Объект google.maps.Marker получил ссылку на переменную beach.В момент обращения к элементу title в google.maps.Marker запрашивается самая последняя beach, которая является последней.

Правильный способ решения этой проблемы - это так называемая непосредственная функция:

    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = (function (currentBeach) {
            return new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                title: currentBeach[0],
                zIndex: currentBeach[3],
                animation: google.maps.Animation.DROP
            });
        }(beach))
        // MARKERE START
        google.maps.event.addListener(marker, 'click', function() { 
            map.setZoom(9); map.setCenter(myLatLng); 
            if (currentInfoWindow != null) { 
                currentInfoWindow.close(); 
            }
            infowindow.open(map, marker);
            currentInfoWindow = infowindow;
        });             
      }

Кстати: единственное, что может определить область действия, это function.Таким образом, вы должны определить var s в начале функции в одном операторе var.Этот шаблон называется шаблон одного оператора var .: D