Question

我正在使用Google Maps API并希望加载地图，然后使用边界点击外部API来获取地图中多个城市的当前天气状况。我遇到的问题是，如果我async: false它可以正常工作，但一旦我设置async: true标记就不再加载了。这就是我所拥有的，我感觉它非常简单。

function initialize()
{
  var mapProp = {
    center: new google.maps.LatLng(41.8369,-95.6847),
    zoom:4,
    disableDefaultUI:true,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

  google.maps.event.addListener(map, 'bounds_changed', function() {
      calcBounds();
  });

function calcBounds() {
  var bounds = map.getBounds();
  var ne = bounds.getNorthEast();
  var sw = bounds.getSouthWest();
  for (var lat = ne.lat(); lat > sw.lat(); lat = lat - 5) {
    for (var long = ne.lng(); long > sw.lng(); long = long - 5) {
      $.ajax({
        async: false,
        url: 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&APPID=' + apikey,
        dataType: "json",
        success: function(data) {
          var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(lat, long),
          });//End Marker
        },//End Success
        error: function() {
         alert("ERROR");
        }
      });//End AJAX
    }//End Long for
  }//End lat For
}//End function

Answer 1

您遇到的问题是人们学习Javascript的常见问题。发生的事情是，每次经过循环的一次迭代时，lat＆amp;的值都是长期改变了。这成为一个问题，因为你的ajax函数正在引用这个变量！所以，实际上这意味着你的所有web请求都是相同的lat和long，因为循环可能已经在第一个ajax请求被发送之前就已经完成了...... 这些循环之一需要大约5ms，接近50-100ms发送和接收ajax请求。将其设置为async：false有效（但它会冻结浏览器！），因为在更改lat和long变量的值之前，它会等待发送并返回请求。因此，显然您希望ajax请求记住您希望它查找的值，而不是现在的内存值。解决方案是将您要使用的变量放在闭包中，以便它们保持在ajax函数的本地，并且在循环的下一次迭代中不会被更改。

这是一个工作示例。和一个jsfiddle：http://jsfiddle.net/47b3mjn3/2/

  function initialize() {
    var mapProp = {
        center: new google.maps.LatLng(41.8369, -95.6847),
        zoom: 4,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    google.maps.event.addListener(map, 'bounds_changed', function () {
        calcBounds();
    });

    function calcBounds() {
        var bounds = map.getBounds();
        var ne = bounds.getNorthEast();
        var sw = bounds.getSouthWest();
        for (var lat = ne.lat(); lat > sw.lat(); lat = lat - 5) {
            for (var long = ne.lng(); long > sw.lng(); long = long - 5) {
                addMarker(lat, long);
            } //End Long for
        } //End lat For
    } //End function
}

function addMarker(lat, long) {
    _lat = lat;
    _long = long;
    $.ajax({
                    url: 'http://api.openweathermap.org/data/2.5/weather?lat=' + _lat + '&lon=' + _long + '&APPID=' + apiKey,
                    dataType: "json",
                    success: function (data) {
                        new google.maps.Marker({
                            map: map,
                            position: new google.maps.LatLng(_lat, _long),
                        }); //End Marker
                    }, //End Success
                    error: function () {
                        alert("ERROR");
                    }
                }); //End AJAX
}

initialize();

Google地图异步添加标记

1 个答案: