作为参数传递的函数的异步执行

Question

我正面临以下问题。 我想使用Google的地理编码服务在地图上绘制一些标记。 但是，标记是在进行地理编码甚至完成其工作之前实例化的。 drawMarker函数将返回location未定义的Marker 。

我尝试将地理编码功能作为参数传递给drawMarker函数，然后在此处执行。 我认为这样可以实现同步行为，事实并非如此。 简化的代码如下：

drawMarker(i, map, codeAddress, locationsToConvert[i]);

function drawMarker(i, map, func, arg) {
    var location = func.apply(this, [arg]);
    return new google.maps.Marker({
        position: {lat: location.lat, lng: location.lng},
        map: map,
        html: locations[i][0],
        id: i
    });
}

function codeAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            return results[0].geometry.location
        }
    });
}

我最好的解决方案是什么：

• 使用Promise界面？
• 在一个功能中完成所有操作并在地址解析服务的回调中实例化Marker ？
• 其他？

Answer 1

您可以尝试先获取地址，并在drawMarker回调后从回调中调用drawMarker 。 将drawMarker编辑为接近外观，我没有完整的代码，因此可能不是100％正确。

codeAddress(locationsToConvert[i]);

function drawMarker(i, map, location) {
    return new google.maps.Marker({
        position: {lat: location.lat, lng: location.lng},
        map: map,
        html: locations[i][0],
        id: i
    });
}

function codeAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            drawMarker(i, map, results[0].geometry.location);
        }
    });
}

Answer 2

您必须将drawMarker放入地址解析器回调中

function codeAddress(address) {
    geocoder.geocode({ 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            drawMarker(map,results[0].geometry.location);
        }
    });
}

看看这个-> 小提琴的例子

Answer 3

为什么不转换location然后在绘制函数返回后调用它呢？

类似于以下示例（将根据您使用的Promise lib进行更改）-也不能保证示例中没有任何语法错误。

function geocodeAsync(addressToConvert) {
    return new Promise((resolve, reject) => {
      geocoder.geocode( {'address': addressToConvert }, (results, status) => {
        if (status == google.maps.GeocoderStatus.OK) {
            resolve(results[0].geometry.location);
        }
        else {
            reject(status);
        }
      });
    });
}
let loc = locationsToConvert[i];
var promise = geocodeAsync(loc)
promise.then(result => {
  let marker = new google.maps.Marker({
        position: {lat: result.lat, lng: result.lng},
        map: map,
        html: loc[0],
        id: i
    });
  // add marker to google maps
})
.catch(err => console.error(err));