javascript - 试图从传单地理编码器返回纬度和经度值

Question

我一直在尝试找出如何从 geocoder block 中获取或返回值，并在另一个 function 中使用该值。我不断收到 variable is not defined 错误

geocoder = new L.Control.Geocoder.Nominatim();
var location = $('.location').text();

geocoder.geocode(location, function(results) {    
        var latLng = new L.LatLng(results[0].center.lat, results[0].center.lng);
        var marker = new L.Marker (latLng);
        // console.log(Object.values(latLng));   

        var geocodeLocation = Object.values(latLng);
});
    
function loc() {

      console.log(geocodeLocation);
      
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
    integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
    crossorigin=""></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/perliedman-leaflet-control-geocoder/1.9.0/Control.Geocoder.js"></script>
    
    
      <span class="location">Philippines</span>

Answer 1

如我的评论所述，如果您全局声明 geocodeLocation 并且函数 geocoder.geocode 是异步的，则无法保证在您使用该变量时会设置该变量。我能想到的解决此问题的唯一方法(即在其他地方使用 geocodeLocation)是使用 Promises。这样您实际上可以返回 geocodeLocation。

关于异步执行如何工作的快速解释。 (别担心，我也曾经问过如何从异步调用中返回)。

假设我们有两个函数

function1()
function2()

和function1()是异步的。这意味着 function2() 不会等待 function1() 结束才开始运行。但是 Geocoder.geocode 的回调(您传递给它的函数)只有在完成异步操作时才会被调用。但是 function2() 已经被调用了..

但是有办法返回一个值(使用 async/await)，大致如下:

function geocode(location, func) { //that's the geocoder.geocode
  //calculate coordinates with location
  var results = { coordinates: { lat: '37.423021', long: '-122.083739' } }
  func(results);
}
    
async function fetchGeocodeLocation(location) {

  var promise = new Promise((resolve, reject) => { //wrap your geocoder.geocode function in a Promise
    geocode(location, function(results) { 
      //var latLng = new L.LatLng(results[0].center.lat, results[0].center.lng);
    //var marker = new L.Marker (latLng);
    // console.log(Object.values(latLng));   

    //var geocodeLocation = Object.values(latLng);  

      resolve(results.coordinates);
    });
  });

  var geoCodeLocation = await promise;
  return geoCodeLocation;
}

fetchGeocodeLocation("somewhere").then(geoCodeLocation => console.log("geoCodeLocation", geoCodeLocation))

或者，假设你的 loc() 函数是异步的，那么就像这样

function geocode(location, func) {
  //calculate coordinates with location
  var results = { coordinates: { lat: '37.423021', long: '-122.083739' } }
  func(results);
}
    
function fetchGeocodeLocation(location) {

  return new Promise((resolve, reject) => { //wrap your geocoder.geocode function in a Promise
    geocode(location, function(results) { 
      //var latLng = new L.LatLng(results[0].center.lat, results[0].center.lng);
    //var marker = new L.Marker (latLng);
    // console.log(Object.values(latLng));   

    //var geocodeLocation = Object.values(latLng);  

      resolve(results.coordinates);
    });
  });
}

async function loc() {
  var location = "somewhere";
  var geoCodeLocation = await fetchGeocodeLocation(location);
  console.log("geoCodeLocation", geoCodeLocation)
}

loc()

---

最后，快速解释一下async/await。

等待是做什么的？

它会等待 promise 解决，然后再执行 await 行之后的任何内容。如果没有 await，它之后发生的任何事情都会在 promise 解决之前执行。您将获得处于待处理状态的 promise 。

为什么我们必须在异步函数中使用 await？

带有 await 的行可能需要 30 秒才能执行，并且您的浏览器将卡住(这也是 ajax 调用是异步的原因)。浏览器会询问您是否要终止卡住浏览器的脚本(有人做了坏事)。所以 async 表示该函数是异步的，函数调用之后发生的任何事情都不会等待它完成后再开始。但是，await 确保它之后发生的任何事情都不会在 promise 解决之前执行。