Функция геокодирования Google возвращает неопределенное значение

#javascript #function #api #geocode

#javascript #функция #API #геокодирование

Вопрос:

 function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 15,
  center: {lat: 24.149950, lng: 120.638610},
  mapId: '63d22d3ae6cf15ff'
  });

  console.log(getCoordinates("Bouverie Street"));
}

// geocoder
function getCoordinates(address) {
    const geocoder = new google.maps.Geocoder();
  geocoder.geocode({address: address}, (results, status) => {
    if (status === 'OK') {
        return results[0].geometry.location;
    } else {
        alert("Geocode error: "   status);
        console.log(("Geocode error: "   status));
    }
  });
}
 

В строке 9 я пытаюсь зарегистрировать возвращаемый объект из getCoordinates(). Однако по какой-то причине оно отображается как неопределенное. Я думаю, что функция работает так, как задумано, поскольку, если бы я добавил «console.log (results);» над оператором return, он регистрирует объект результата, как и предполагалось.

 if (status === 'OK') {
        return results[0].geometry.location;
    }
 

Что я делаю не так? Заранее спасибо.

Комментарии:

1. это обратный вызов, который он не вернет

Ответ №1:

Произошла асинхронная проблема. Чтобы избавиться от этого (в данном случае вы печатаете широту и долготу), вы можете передать параметр обратного вызова при вызове getCoordinates функции.

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

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=falseamp;callback=initMap" defer></script>
 

Поэтому замените это своим собственным, который будет выглядеть следующим образом:

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR_API_KEYamp;callback=initMap" defer></script>
 

Итак, здесь я собираюсь передать параметр обратного getCoordinates вызова функции, который будет печатать координаты, переданные getCoordinates таким образом:

 function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 15,
        center: { lat: 24.149950, lng: 120.638610 },
        mapId: '63d22d3ae6cf15ff'
    });

    getCoordinates("Bouverie Street", printLocation);

}

function printLocation(location) {
    console.log("location");
    console.log(location.lat());
    console.log(location.lng());
}

// geocoder
function getCoordinates(address, myCallback) {
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({ address: address }, (results, status) => {
        if (status === 'OK') {
            myCallback(results[0].geometry.location);
        } else {
            console.warn = () => {}; // stop printing warnings
            console.log(("Geocode error: "   status));
        }
    });
} 
 #map {
    height: 400px;
    width: 100%;
} 
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=falseamp;callback=initMap" defer></script>
<div id="map"></div>