1

とのgmap3拡張子を使用しています。Google Maps APIjQuery

.gpxAJAX 経由で読み取り、各座標を取得して配列に追加するファイルがあります。次に、この配列を返して、マップにポリラインを設定します。

関数 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 では正しく描画されます。

4

1 に答える 1

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呼び出しの仕組みとスレッド化について読んでください

于 2013-04-05T11:17:26.563 に答える