使用 Google 映射 Javascript API 在外部函数中使用内部函数变量

Question

我是 Javascript 的新手，所以如果有人回答了这个问题，请原谅我，但我无法让它工作，也无法在网上的任何地方找到答案。我正在尝试 return 使用 Google 的地图 JavaScript API 的地址。我可以将它打印到内部函数内的控制台，但如果我尝试在该函数外访问它，它会打印未定义。如何访问外部函数中的变量并 return 它？？

    function getAddress(latlng) {
        var address;
        var service = new google.maps.Geocoder();
        
        service.geocode({ location: latlng}, function(results, status) {
            if (status === "OK") {
                if (results[0]) {
                    address = results[0].formatted_address;
                    console.log(address); //prints address
                } 
            }
        });
        console.log(address); //prints undefined
    }

Answer 1

问题是一个典型的异步陷阱，其中 address 仅在调用回调后可用，通常，当需要回调时，这意味着无法保证其结果在其调用之外可用执行，并且由于我相信涉及网络请求，所以结果无法及时到达让您立即登录 address。

var value;
api.thing(callbackThatSetsValue)
console.log(value);

问题的 git 在那里：value 不能指向任何东西，因为 callbackThatSetsValue 将在下一行代码执行后被调用。

这里至少有 2 个选项，让我们看看它们是什么样的...

等待结果

此选项允许您在地址解析后执行任何您需要的操作。

function getAddress(latlng, after) {
  var service = new google.maps.Geocoder();
  service.geocode({ location: latlng}, function(results, status) {
    if (status === "OK")
      if (results[0])
        after(results[0].formatted_address);
  });
}

以上实用程序允许您 getAddress({lat:50,lng:1}, console.log)，例如，或传递任何应呈现、使用、显示此类地址的回调。

这种方法的缺陷在于，如果 status 不是 OK，您将永远挂起回调，因为它永远不会被调用。

或者，您可以在该函数中放置一个 else 并传递一个错误，或者 null，并在回调中做出相应的反应。

无极之道

是目前最常见的模式，因此我提出了建议。

function getAddress(latlng) {
  return new Promise(function ($, _) {
    var service = new google.maps.Geocoder();
    service.geocode({ location: latlng}, function(results, status) {
      if (status === "OK")
        if (results[0])
          $(results[0].formatted_address);
      _(new Error("status was " + status));
    });
  });
}

在这种情况下，你 getAddress({lat:50,lng:1}).then(console.log).catch(console.error)，所以你有一个 escape/way 在地址无效时做出反应。

使用 Google 映射 Javascript API 在外部函数中使用内部函数变量

Using inner function variable in outer function using Google Maps Javascript API

javascript

google-api-javascript-client