jquery 向Google Maps API调用添加promise

s4n0splo  于 2023-05-17  发布在  jQuery
关注(0)|答案(2)|浏览(184)

我需要从Javascript/jQuery中的一个函数返回一个数组,但该函数在数组被设置之前就返回了(因为它是一个 AJAX 调用)。
有人建议我使用promise,但我以前没有使用过,而且到目前为止还无法在代码中实现它。下面是我的代码:

mapClass.setLatLng = function(location, clubs) {        
        document.geoCodeRequestCompleteFlag = 0;
        geocoder = new google.maps.Geocoder();      
        geocoder.geocode({'address' : location}, function(results, status) {    
            //console.log(results);
            if(status === "OK") {                   
                var latLngArray = [];
                latLngArray.push(parseFloat(results[0].geometry.location.lat()));
                latLngArray.push(parseFloat(results[0].geometry.location.lng()));   
                var sortedArray = mapClass.calculateDistances(clubs, latLngArray);  
                return sortedArray;
            }           
        });             
    }

可以看到,当我返回is时,sortedArray变量为空。有没有人知道我如何添加块代码来确保数组变量在返回之前被设置好?谢谢

6ojccjat

6ojccjat1#

使用promise的方式是创建一个promise,然后从方法中返回该promise。这个promise有像.then(successHandler, errorHandler)这样的方法,允许你指定当promise被 resolved(被赋予一个值)时要执行的函数。然后,在将来某个时候从地理编码器调用中获取结果时,解析promise。
在jQuery中,promise被称为Deferreds
然后,您的代码将更改为如下所示:

mapClass.setLatLng = function(location, clubs) {
        var deferred = $.Deferred(),
            geocoder = new google.maps.Geocoder();

        document.geoCodeRequestCompleteFlag = 0;
        geocoder.geocode({'address' : location}, function(results, status) {    

        if (status === 'OK') {                   
           var latLngArray = [
              +results[0].geometry.location.lat(),
              +results[0].geometry.location.lng()
           ];

           deferred.resolve(mapClass.calculateDistances(clubs, latLngArray));
         } else {
           deferred.reject(status);
         }          
     });             

     return deferred.promise();
}

你可以这样使用它:

mapClass.setLatLng('123 Some St, Wherever', [/* clubs */])
 .then(function (sortedArray) {
    console.log('Promise resolved with: ', sortedArray);
}, function (err) {
    console.error('Uh oh! An error occurred!', err);
});
wkftcu5l

wkftcu5l2#

更新:该模块已弃用,请使用@googlemaps/google-maps-services-js。
如果您使用的是官方的Google Maps Official NPM module,你可以做得更容易和清洁.
首先,您需要使用Promise属性初始化客户端:

const googleMapsClient = require('@google/maps').createClient({
  key: 'your API key here',
  Promise: Promise
});

然后,你需要做的就是使用asPromised(),然后你就可以开始了:

googleMapsClient.geocode({
  address: '1600 Amphitheatre Parkway, Mountain View, CA'
})
.asPromise()
.then(response =>  response.json.results)
.catch(err => console.log(err))

相关问题