Question

我有以下代码从php脚本获取地址列表，然后向谷歌地图发出ajax请求，然后创建标记并更改缩放以适合标记。

var bounds = new google.maps.LatLngBounds();
$.getJSON('/dmvfinder/dmvsearch.php', {zipcode: zipcode, state: state, city: city}, function (addresses) {
	addresses.forEach(function(address){
		$.getJSON('http://maps.googleapis.com/maps/api/geocode/json', {address: address}, function(data){
				var p = data.results[0].geometry.location;
				var latlng = new google.maps.LatLng(p.lat, p.lng);
				var marker = new google.maps.Marker({
					position: latlng,
					map: map
				});
				bounds.extend(latlng);
		});
	});
});
map.fitBounds(bounds);

据我所知，代码的问题是fitBounds方法在ajax完成之前触发并且'bounds'被填充。我怎么可能在这里推迟最后一行代码？

提前谢谢！

Answer 1

你需要改变2件事

累积address.forEach的所有承诺 - 将其更改为map，并确保return $.getJSON(..)。这将为您提供一系列延期。
等待所有人使用$.when完成 - 因为这需要参数，而不是数组，您可以在1）数组上使用$.when.apply(..)

像这样：

var bounds = new google.maps.LatLngBounds();
$.getJSON('/dmvfinder/dmvsearch.php', {zipcode: zipcode, state: state, city: city}, function (addresses) {
    // 1. Accumulate all the promises into an array
    var allPromises = addresses.map(function(address){
        return $.getJSON('http://maps.googleapis.com/maps/api/geocode/json', {address: address}, function(data){
            var p = data.results[0].geometry.location;
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            bounds.extend(latlng);
        });
    });
    // 2. wait for them all to complete
    $.when.apply($,allPromises).then(function(){
      map.fitBounds(bounds);
    })
});

我如何推迟AJAX请求后的最后一行代码？

1 个答案: