Я пишу сценарий, который ставит маркеры на карту. Чтобы преобразовать почтовый индекс в широту и долготу, я использую функцию геокодирования. Эта функция обновляет глобальную переменную. Но я не могу заставить цикл использовать обновленную переменную. Некоторое время я боролся, но не могу понять, почему цикл 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));
}
}
Доступ к сервису геокодирования с 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
.
Ссылка: Гугл документы
Спасибо за ответ! Действительно полезно!