从 AJAX 调用填充数组并将其返回给调用函数

Question

我正在为Google Maps API 和jQuery 使用gmap3 扩展。

我有一个 .gpx 文件，我通过 AJAX 读取并获取每个坐标并将其添加到数组中。然后我返回这个数组以在我的地图中填充我的折线。

在函数 Test 中，我会在返回之前对点进行计数，并且计数为 0。

这是我处理 .gpx 文件以返回坐标的函数：

function Test() {

     var points = [];

     $.ajax({
          type: "GET",
          url: "gpx/12345.gpx",
          dataType: "xml",
          success: function (xml) {
               $(xml).find("trkpt").each(function () {
                    var lat = $(this).attr("lat");
                    var lon = $(this).attr("lon");
                    var p = new google.maps.LatLng(lat, lon);
                    points.push(p);
               });
          }
     });

     return points;
}

$(document).ready(function () {
     var points = Test();
     var route1Latlng = new google.maps.LatLng(-33.7610590, 18.9616790);
     $('#map_canvas').gmap3({
          map: {
               options: {
                    center: route1Latlng,
                    zoom: 11
               }
          },
          polyline: {
               options: {
                    path: points,
                    strokeColor: '#FF00AA',
                    strokeOpacity: .7,
                    strokeWeight: 4
               }
          }
     });
});

在 IE9 中不绘制折线，但在 FireFox 中可以正常绘制。

Answer 1

发生的事情是你调用 test 来返回点，因为它是一个异步请求，它不会拖拽程序的执行并且会返回空的点数组。您正在使用空数组进行绘图，因此您的行没有显示。它只会在 ajax 请求完成后显示。因此，我们将标记的绘图包装到另一个函数中，并在 ajax 调用完成时调用它。

尝试像这样在ajax的成功事件中调用一个函数

function Test() {

 var points = [];

 $.ajax({
      type: "GET",
      url: "gpx/12345.gpx",
      dataType: "xml",
      success: function (xml) {
           $(xml).find("trkpt").each(function () {
                var lat = $(this).attr("lat");
                var lon = $(this).attr("lon");
                var p = new google.maps.LatLng(lat, lon);
                points.push(p);
           });
           drawPolyline(points); //when all the points have been loaded then we call this method
      }
 });
}

function drawPolyline(pointsTobeDrawn){ // this method gets the points and plots it
var route1Latlng = new google.maps.LatLng(-33.7610590, 18.9616790);
     $('#map_canvas').gmap3({
          map: {
               options: {
                    center: route1Latlng,
                    zoom: 11
               }
          },
          polyline: {
               options: {
                    path: pointsTobeDrawn,
                    strokeColor: '#FF00AA',
                    strokeOpacity: .7,
                    strokeWeight: 4
               }
          }
     });
}

$(document).ready(function () {
     Test();  // we need only this method as it will plot the markers on success event of it   
});

使用ajax false as

$.ajax({
      async: false, //dont use quotes here like "false".
      type: "GET",
      url: "gpx/12345.gpx",
      dataType: "xml",
      success: function (xml) {
           $(xml).find("trkpt").each(function () {
                var lat = $(this).attr("lat");
                var lon = $(this).attr("lon");
                var p = new google.maps.LatLng(lat, lon);
                points.push(p);
           });
           drawPolyline(points);
      }
 });

如果我们将 async 设置为 false，那么我们的程序将等待 ajax req 完成其进程。

阅读有关 ajax 调用的工作原理和线程的更多说明