Question

当我点击下面的代码时，它会将locationsgohere显示为空白，当我再次点击它时，locationsgohere会显示相应的数据。

比如我在London, UK textarea中有#id这应该将output显示为var locations = [['London,51.511214,-0.119824]],，但前提是我点击了两次。我第一次点击它只显示var locations = [],

如果我点击三次，则会显示以下var locations = [['London,51.511214,-0.119824]['London,51.511214,-0.119824]],

我在for循环中做错了什么？

var locationsgohere,output;
$('.generate').click(function(){
    var temp_addresses = document.getElementById("gps").value.split("\n");
    for(var i=0;i<temp_addresses.length;i++){
        addresses.push(temp_addresses[i]);
        geocoder.geocode( { 'address': temp_addresses[i]}, function(response, status) {
            geocode_results[i] = new Array();
            geocode_results[i]['status'] = status;
            var top_location = response[0];
            var lat = Math.round(top_location.geometry.location.lat() * 1000000)/1000000;
            var lng = Math.round(top_location.geometry.location.lng() * 1000000)/1000000;
            geocode_results[i]['lat'] = lat;
            geocode_results[i]['lng'] = lng;
            geocode_results[i]['l_type'] = top_location.geometry.location_type;
            locationsgohere += "['"+top_location.address_components[0].long_name+","+lat+","+lng+"]";
        });
    }
    if (!locationsgohere){
        locationsgohere = '';
    }
    output = 'var locations = ['+locationsgohere+'],';// JavaScript Document
});

更新了代码

var temp_addresses = document.getElementById("gps").value.split("\n");
    var todo = temp_addresses.length; // count the remaining requests
    //  for(var i=0;i<temp_addresses.length;i++){
    for(var i=0;i<temp_addresses.length;i++){
        (function(i){ // protect i in an immediately called function
            addresses.push(temp_addresses[i]);
            geocoder.geocode( { 'address': temp_addresses[i]}, function(response, status) {
                geocode_results[i] = new Array();
                geocode_results[i]['status'] = status;
                var top_location = response[0];
                var lat = Math.round(top_location.geometry.location.lat() * 1000000)/1000000;
                var lng = Math.round(top_location.geometry.location.lng() * 1000000)/1000000;
                geocode_results[i]['lat'] = lat;
                geocode_results[i]['lng'] = lng;
                geocode_results[i]['l_type'] = top_location.geometry.location_type;
//              locationsgohere += "['"+top_location.address_components[0].long_name+","+lat+","+lng+"]";
            });
            if (--todo===0) { // finished
                output = 'var locations = ['+(locationsgohere||'')+'],';
            }
            console.log(locationsgohere);
        })(i);
//  var output = 'var locations = ['+locationsgohere+'],';
    }

Answer 1

你遇到的问题是

当调用传递给异步 geocode函数的回调时，for循环已结束且i具有循环结束的值
您过早构建输出，必须等待所有请求完成

这是一个解决方案：

var temp_addresses = document.getElementById("gps").value.split("\n");
var todo = temp_addresses.length; // count the remaining requests
for(var i=0;i<temp_addresses.length;i++){
    (function(i){ // protect i in an immediately called function
        addresses.push(temp_addresses[i]);
        geocoder.geocode( { 'address': temp_addresses[i]}, function(response, status) {
            geocode_results[i] = new Array();
            geocode_results[i]['status'] = status;
            var top_location = response[0];
            var lat = Math.round(top_location.geometry.location.lat() * 1000000)/1000000;
            var lng = Math.round(top_location.geometry.location.lng() * 1000000)/1000000;
            geocode_results[i]['lat'] = lat;
            geocode_results[i]['lng'] = lng;
            geocode_results[i]['l_type'] = top_location.geometry.location_type;
            locationsgohere += "['"+top_location.address_components[0].long_name+","+lat+","+lng+"]";
            if (--todo===0) { // finished
                output = 'var locations = ['+(locationsgohere||'')+'],';

                // Use output HERE !

            }
        });
        console.log(locationsgohere);
    })(i);
}

Answer 2

这是因为我们不知道异步地理编码回调中的代码何时会运行。

geocoder.geocode(... function() {
  // This code will run at some point... 
  // either before, or after the "code below"
});

// code below

您需要检测循环中的最后一个回调何时触发，然后显示位置。

Javascript添加到变量

2 个答案: