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

时间:2017-07-07 11:50:59

标签: javascript json ajax google-maps google-maps-api-3

我想知道为什么这不起作用,它完全记录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');
  }

1 个答案:

答案 0 :(得分:1)

这是因为对google api的调用是异步的。 这意味着外部控制台日志将在谷歌的响应仍处于待处理状态时执行。

你可以这样写:

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