JavaScript - 来自国家/地区名称的 Google API lat/lng

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 6 年前。

我想知道为什么这不起作用，它完美地记录 Object {lat: 52.132633, lng: 5.291265999999999} 。但只有console.log()里面done()功能有效。当我返回那个确切的变量时，对另一个不起作用...

function getLatLng() {
    var LatLng;
    $.ajax({
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address=germany&sensor=false',
        type: 'GET',
        dataType: 'json',
    })
    .done(function(data) {
        LatLng = data.results[0];
        console.log(LatLng);
    })
    return LatLng;
}

console.log(getLatLng());

我需要一些解决方法，以便我可以制作 initMap()函数与我的纬度和经度变量一起使用:

function getLatLng() {
    var LatLng;
    $.ajax({
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address=germany&sensor=false',
        type: 'GET',
        dataType: 'json',
    })
    .done(function(data) {
        LatLng = data.results[0];
        console.log(LatLng);
    })
    return LatLng;
}

console.log(getLatLng()); // undefined

  function initMap() {

    var styledMapType = new google.maps.StyledMapType(
        [],
        {name: 'Styled Map'});

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: latVal, lng: lngVal}, // error >>> undefined
      zoom: 11,
      mapTypeControlOptions: {
        mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
                'styled_map']
      }
    });

    map.mapTypes.set('styled_map', styledMapType);
    map.setMapTypeId('styled_map');
  }

Answer 1

这是因为对 google api 的调用是异步的。这意味着外部控制台日志已执行，而来自 google 的响应仍处于待处理状态。

你可以这样写:

function getLatLng() {
    return $.ajax({
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address=germany&sensor=false',
        type: 'GET',
        dataType: 'json',
    });
}

getLatLng().done(function(data) {
    var latlng = data.results[0];
    console.log(latlng);
    //...further processing
});

如果您需要在done函数之外访问latlng，您可以重写如下:

function getLatLngPromise() {
    return new Promise(function(resolve) { 
        $.ajax({
            url: 'https://maps.googleapis.com/maps/api/geocode/json?address=germany&sensor=false',
            type: 'GET',
            dataType: 'json',
        }).done(function(data) {
            resolve(data);
        });
    });
}

async function getLatLng() {
    var data = await getLatLngPromise();
    return data[0];
}

var latlng = getLatLng();
console.log(latlng);

或者您可以使用 latlng 参数对 initMap 进行参数化，并将 initMap 调用移至我的第一个示例的 did 函数。 ( pastebin.com/VpSUma9R )