Google 地理编码函数返回未定义

Question

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() 记录 return 对象。但是由于某种原因它显示为未定义。如果我添加“console.log(results);”，我认为该功能会按预期工作在 return 语句之上，它按预期记录结果对象。

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

我做错了什么？提前致谢。

Answer 1

发生异步问题。要摆脱它（在这种情况下，您正在打印纬度和经度），您可以在调用 getCoordinates 函数时传递一个回调参数。

这里我将使用下面的脚本作为示例：

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

因此将其替换为您自己的，如下所示：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY&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=false&callback=initMap" defer></script>
<div id="map"></div>

Google 地理编码函数返回未定义

Google geocode function returning undefined

javascript

api

function

geocode