Question

我正在使用gmap3和Google Maps API的{{1}}扩展名。

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

在功能测试中，我会在返回之前对点数进行计数，并且计数为0。

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

.gpx

在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作为

$.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调用如何工作和线程以获得更多说明

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

1 个答案: