Javascript 在jQuery中使用web api ajax调用填充数组

我对jQuery或Javascript有问题。我正在尝试从IP阵列在Google地图中显示更多标志。我设法将IP数组传递给函数，但当我使用ajax调用web api的次数是数组长度的两倍时，我遇到了一个问题，结果，位置数组为空（未定义）

这是我的密码

function initialize(ipList)
{
    var locations = [];
    var ips = ipList;
    var apiUrl = 'http://freegeoip.net/json/';


//    for(var i = 0; i < ips.length; i++)
//    {
//        jQuery.ajax
//        ({ 
//            url: apiUrl + ips[i], 
//            type: 'POST', 
//            dataType: 'jsonp',
//            success: function(location) 
//            {
//                if(location != null)
//                {
//                    locations.push(location);;
//                }
//            }
//        });
//    }

    $.each(ips, function(i, x) 
    {
        $.ajax
        ({
            url: apiUrl + x,
            type: "POST",
            cache: false,
            success: function(data) 
            {
                if(data != null)
                {
                    locations[i] = location;
                }
            }
        });
    });

    var properties = 
    {
        center: new google.maps.LatLng(locations[0].latitude, locations[0].longitude),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"),properties);

    for (var i = 0; i < locations.length; i++)
    {
        var marker = new google.maps.Marker
        ({
            position:{lat: locations[i].latitude, lng: locations[i].longitude},
            animation:google.maps.Animation.BOUNCE,
            title: locations[i].city
        });

        marker.setMap(map);
    }
}

函数初始化（ipList）
{
var位置=[]；
var-ips=ipList；
var apiUrl=http://freegeoip.net/json/';
//对于（变量i=0；i

你的意思是

locations[i] = location; 

而不是

locations[i] = data;

?

---

您可能有一个上下文、范围问题。使用回调时，回调函数无法看到初始化调用创建的值。最快的解决方案是在您的初始化范围之外定义位置。

这是完全未经测试的，但还有更多类似的内容。我使map成为一个全局变量

          var map = null;
            function initialize(ipList) {
                var ips = ipList;
                var apiUrl = 'http://freegeoip.net/json/';

                $.each(ips, function (i, x) {
                    $.ajax
                    ({
                        url: apiUrl + x,
                        type: "POST",
                        cache: false,
                        success: function (data) {
                            if (data != null) {
                                porcessPoint(data);
                            }
                        }
                    });
                });
            }

            function processPoint(datapoint) {
                // assuming the first point is used to create the map
                if (!map) {
                    var properties =
                    {
                        center: new google.maps.LatLng(datapoint.latitude, datapoint.longitude),
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    map = new google.maps.Map(document.getElementById("map"), properties);
                }

                var marker = new google.maps.Marker
                ({
                    position: { lat: datapoint.latitude, lng: datapoint.longitude },
                    animation: google.maps.Animation.BOUNCE,
                    title: datapoint.city
                });
                 marker.setMap(map);
            }

---

我希望这对某人有用。以下是我如何更改整个代码的：

$(function() 
{   
    $('#details').hide();
    $("#btnSubmit").click(function()
    {
        var ipInput = $("#ipInput").val();

        $.ajax
        ({
            type: 'post',
            url: 'http://localhost/LocationFromIP/public_html/php/traceroute.php',
            data: {param:  ipInput},
            success: function(data)
            {
                var ipList = data.match(/\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/g);
                for(var i = 0; i < ipList.length; i++)
                {
                    $('#details').append(ipList[i] + '<br />');
                }
                initialize(ipList);
                $('#details').show();
            },
            error: function (xhr, ajaxOptions, thrownError) 
            {
               alert(xhr.status);
               alert(thrownError);
            }
        });
    }); 
});


function initialize(ipList)
{
    var ips = ipList;
    var apiUrl = 'http://freegeoip.net/json/';

    var map = null;
    $.each(ips, function(i, x) 
    {
        $.ajax
        ({
            url: apiUrl + x,
            type: "GET",
            cache: false,
            success: function(location) 
            {
                if (i == 0) 
                {
                    var properties = 
                    {
                        center: new google.maps.LatLng(location.latitude, location.longitude),
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    map = new google.maps.Map(document.getElementById("map"),properties);
                }

                var marker = new google.maps.Marker 
                ({
                    position:{lat: location.latitude, lng: location.longitude},
                    animation:google.maps.Animation.BOUNCE,
                    title: location.city
                });

                marker.setMap(map);
            }
        });
    });


}

$（函数（）
{   
$（“#详细信息”）.hide（）；
$（“#btnsupmit”）。单击（函数（）
{
var ipInput=$（“#ipInput”）.val（）；
$.ajax
({
键入：“post”，
网址：'http://localhost/LocationFromIP/public_html/php/traceroute.php',
数据：{param:ipInput}，
成功：功能（数据）
{
var ipList=data.match（/\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/g）；
对于（变量i=0；i）；
}
初始化（ipList）；
$（“#详细信息”）.show（）；
},
错误：函数（xhr、ajaxOptions、thrownError）
{
警报（xhr.状态）；
警报（thrownError）；
}
});
}); 
});
函数初始化（ipList）
{
var-ips=ipList；
var apiUrl=http://freegeoip.net/json/';
var-map=null；
$。每个（IP，功能（i，x）
{
$.ajax
({
url:apiUrl+x，
键入：“获取”，
cache:false，
成功：功能（位置）
{
如果（i==0）
{
变量属性=
{
中心：新的google.maps.LatLng（位置.纬度，位置.经度），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=新的google.maps.map（document.getElementById（“map”），属性）；
}
var marker=new google.maps.marker
({
位置：{lat:location.lation，lng:location.longitude}，
动画：google.maps.animation.BOUNCE，
标题：地点。城市
});
marker.setMap（map）；
}
});
});
}

此外，如果只是附加到位置，则不能始终执行位置[locations.length]=location。另一个观察。Ajax是一种异步调用。javascript不会停止并等待ajax调用响应并填充数组，然后再继续函数的其余部分；这就是我想要的。我不是js专家。我知道异步不会停止，这就是问题所在，如何解决？！