Google Maps API - несколько информационных окон и автоматическое центрирование

Question

Я собирал различные фрагменты кода из Интернета (включая StackOverflow), и у меня есть рабочая карта (почти), которая геокодирует почтовые индексы из массива и создает информационные окна для каждого из них.

Две проблемы:

1) мои информационные окна, которые должны брать свой текст из другого массива, всегда используют последнее значение массива

2) я не могу заставить карту центрироваться автоматически.Я использую немного кода, который работал в других обстоятельствах, но в моем коде это не так.

Код довольно понятен:

var geocoder = new google.maps.Geocoder();

var map = new google.maps.Map(document.getElementById('map'), {
  //zoom: 10,
  //center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var postcodes = [
    "EH14 1PR",
    "KY7 4TP",
    "IV6 7UP"   
];

var descriptions = [
    "Slateford",
    "Cortachy",
    "Marybank"
];

var markersArray = [];

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

var marker, i, address, description;

for(var i = 0; i < postcodes.length; i++) {
    address = postcodes[i];
    description = descriptions[i];
    geocoder.geocode(
        {
            'address': address,
            'region' : 'uk'
        }, 
        function(results, status){
            if (status == google.maps.GeocoderStatus.OK) {
                marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map
                });
                markersArray[i] = marker;
                console.log(markersArray[i]);
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(description);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            } else {
                alert("Geocode was not successful for the following reason: " + status);
                return false;
            }
        }
    );

    var bounds = new google.maps.LatLngBounds();

    $.each(markersArray, function (index, marker) {
        bounds.extend(marker.position);
    });

    map.fitBounds(bounds);
    console.log(bounds);
}

Есть мысли?Кажется, проблема связана со значением счетчика i внутри функции геокодирования.

Любая помощь очень ценится!

Answer 1

1) мои информационные окна, которые должны брать свой текст из другого массива, всегда используют последнее значение массива

2) я не могу заставить карту центрироваться автоматически.Я использую немного кода, который работал в других обстоятельствах, но в моем коде это не так.

1) Да, это проблема закрытия.Вот как я могу обойти это.

Я создаю объект для хранения всех свойств, которые я буду использовать.В вашем примере я собираюсь использовать postcode и description.

function location(postalcode, desc){
  this.PostalCode = postalcode;
  this.Description = desc;
}

Теперь выполните быстрый цикл для добавления всех объектов location в массив.

var locations = [];
for(var i = 0; i < postcodes.length; i++) {
     locations.push(new location(postcodes[i], descriptions[i]));
}

Извлечение функциональности геокода в его собственную функцию с параметром для получения объекта location.Затем вы можете просмотреть массив объектов location и геокодировать каждый в отдельности.Теперь почтовый индекс и описание находятся в области действия при создании и отправке запроса.

function GeoCode(singleLocation){
     geocoder.geocode(
        {
            'address': singleLocation.PostalCode,
            'region' : 'uk'
        }, 
        function(results, status){
            if (status == google.maps.GeocoderStatus.OK) {
               var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map
                });

                //quick and dirty way
                bounds.extend(marker.position);
                map.fitBounds(bounds);                    

                markersArray[i] = marker;
                console.log(markersArray[i]);

                google.maps.event.addListener(marker, 'click', function() {
                        infowindow.setContent(singleLocation.Description);
                        infowindow.open(map, this); //this refers to the marker
                });

            } else {
                alert("Geocode was not successful for the following reason: " 
                      + status);
                return false;
            }
        }
    );
} 

2) Как вы можете видеть выше, быстрый способ сделать это - расширить и установить границы внутри.функции обратного вызова для геокода.Это приводит к тому, что функция fitBounds вызывается несколько раз, и это не имеет большого значения, если у вас есть только несколько маркеров, но вызовет проблемы, если у вас есть сотни или тысячи маркеров.В этом случае правильный способ сделать это состоит в создании функции асинхронного цикла.Вы можете увидеть пример этого на одном из моих предыдущих ответов .

Вот пример работы кода, основанного на вашем примере .

Answer 2

Две проблемы:

1) мои информационные окна, которые должны брать свой текст из другого массива, всегда используют последнее значение массива

2) я не могу получитькарта в центр автоматически.Я использую немного кода, который работал в других обстоятельствах, но в моем коде это не так.

Ответы:

1) Это потому, что, скорее всего, у вас естьпроблема closure здесь.

2) center будет определять центральную точку вашей карты, но в вашем коде вы прокомментировали это //center: new google.maps.LatLng(-33.92, 151.25), удаление комментария для этой строки будет центрироватьдля отображения на широту -33,92 и долготу 151,25.
Используйте ниже:

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});