Почему мой цикл for не использует обновленную глобальную переменную?

Я пишу сценарий, который ставит маркеры на карту. Чтобы преобразовать почтовый индекс в широту и долготу, я использую функцию геокодирования. Эта функция обновляет глобальную переменную. Но я не могу заставить цикл использовать обновленную переменную. Некоторое время я боролся, но не могу понять, почему цикл for не использует обновленную переменную. Может кто-нибудь посмотреть? Спасибо заранее.

AndereKlant1 = {
    title: '<strong>Naam</strong><br>\
            Dienst',
    lat: 51.986847,
    long: 5.955350,
    adres: "1011AC",
    geocodeLat: "",
    geocodeLong: "",
};

/*
    AndereKlant2 = { 
        title: '<strong>Naam</strong><br>\
                    Dienst',
        lat: 51.986846,
        long: 5.955350,
        adres: "",
        geocodeLat: "" ,
        geocodeLong: "" ,
      };

*/
locations = [
    [AndereKlant1.title, AndereKlant1.geocodeLat, AndereKlant1.geocodeLong, 0],
    //     [AndereKlant2.title, AndereKlant2.lat, AndereKlant2.long, 0],  
];

function initMap() {

    geocoder = new google.maps.Geocoder();


    var iconAanvraag = {
        url: 'link to icon',
    };

    var iconDienstverlener = {
        url: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/map-marker-icon.png',
    };

    var iconBestaandeklanten = {
        url: 'http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/32/yellow-home-icon.png',
    };

    geocoder.geocode({
        'address': AndereKlant1.adres
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // no need to define it in outer function now
            AndereKlant1.geocodeLat = results[0].geometry.location.lat();
            AndereKlant1.geocodeLong = results[0].geometry.location.lng();
            /*
                    alert(AndereKlant1.geocodeLat);
                    alert(AndereKlant1.geocodeLong);
            */

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

    var map = new google.maps.Map(document.getElementById('map'), {
        disableDefaultUI: true,
        zoomControl: true,
        scaleControl: false,
        rotateControl: true,
        fullscreenControl: true,
        gestureHandling: 'cooperative'

    });
    var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        polylineOptions: {
            strokeColor: "#036396",
            strokeOpacity: 0.6,
            strokeWeight: 6,
        },
        suppressMarkers: true,
    });
    var infowindow = new google.maps.InfoWindow({});
    var marker, i;

    for (i = 0; i < locations.length; i++) {
        //    alert(locations[0][1]);
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: iconBestaandeklanten,
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
43
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Доступ к сервису геокодирования с geocoder.geocode(...) является асинхронным. Это означает, что запрос к службе выполняется в фоновом режиме и для его завершения требуется некоторое время. Функция обратного вызова (function(results, status) {...}), которую вы передаете методу geocode, запускается, когда служба геокодирования отвечает результатом запроса.

Тем временем, пока запрос обрабатывается в фоновом режиме, ваш код продолжает выполняться, и цикл for выполняется до того, как служба геокодирования ответит обновленными координатами.

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

Пример:

geocoder.geocode({
    'address': AndereKlant1.adres
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      locations[0][1] = results[0].geometry.location.lat();
      locations[0][2] = results[0].geometry.location.lng();
      for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          icon: iconBestaandeklanten,
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }

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

Также имейте в виду, что изменение значений AndereKlant1.geocodeLat и AndereKlant1.geocodeLong не приводит к обновлению значений в массиве locations. В массиве locations есть копии значений из AndereKlant1.

Ссылка: Гугл документы

Спасибо за ответ! Действительно полезно!

Diego 07.05.2018 12:47

Другие вопросы по теме