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

Question

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

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 调用移至我的第一个示例的 done 函数。 (pastebin.com/VpSUma9R)