0

xmlhttprequest を使用して、mysql データベースから座標を取得します。これは、次のコードで機能します。

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://skyline-va.de/phpvms/lib/skins/crystal/mysql.php?id="+this.flightdetails.id,true);
xmlhttp.send();

firebug コンソールを見ると、これがこの形式でデータを出力することがわかります

new google.maps.LatLng(51.2848358165405, 6.77062893232108),
new google.maps.LatLng(51.2848358165405, 6.77062893232108),
new google.maps.LatLng(51.2848358165405, 6.77062893232108),
new google.maps.LatLng(51.2848358165405, 6.77062893232108),

等々。
しかし、これを使用してGoogle Maps APIでポリラインを表示するにはどうすればよいですか? すでにグーグルで検索してみましたが、残念ながら役に立つものは見つかりませんでした。また、成功せずにいくつかのことを試しました。

ありがとう！

編集: ここに私が現在取り組んでいる地図があります: http://skyline-va.de/phpvms/index.php/acars/viewmapbig
基本的に私がやりたいことは、飛行機の 1 つ、飛行経路をクリックした場合です。も表示されるはずです。座標はデータベースに保存されていますが、平面をクリックした後にクエリを実行する必要があります。

EDIT2：Googleドキュメンタリーでデータをxml形式で出力することができました。しかし、データを表示するために Google から提供されたコードを動作させることができません。for コマンドを介して取得されるすべての新しいポイントを配列に追加したいと考えています。

 function downloadUrl(url,callback) {
     var request = window.ActiveXObject ?
         new ActiveXObject('Microsoft.XMLHTTP') :
         new XMLHttpRequest;

 request.open('GET', url, true);
 request.send(null);
}
 var flightPlanCoordinates = [
 ];
downloadUrl("http://skyline-va.de/phpvms/lib/skins/crystal/output-xml.php?id="+this.flightdetails.id, function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {

    flightPlanCoordinates.push(new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng"))));

  };
});
flightPath2 = new google.maps.Polyline({
                path: flightPlanCoordinates,
                strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2
            });
            flightPath2.setMap(map);

しかし、それはうまくいかないようです。

4

2 に答える 2

0

あなたの XHR データから、宛先とソースの座標を見つけました。次のようにオブジェクトを作成しました。

var flightPathCoords = [
    new google.maps.LatLng(48.6903, 9.19521),
    new google.maps.LatLng(32.0136, 34.8866),
];

次に、次のプロパティを使用してポリゴン オブジェクトを作成しました

var flightPath = new google.maps.Polyline({
    path: flightPathCoords,
    geodesic: true,
    strokeColor: '#ffff00',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

次に、次を使用してこのオブジェクトをマップにバインドします。

 flightPath.setMap(map);

あとは、メソッドを作成してフライトの onclick にバインドするだけです。これにより、パスが切り替えられるか、 null に設定されます。

お役に立てれば。

編集

次のようなことができます。

var paths = {};

xhr = function(){
    ....
    var flightData = response.responseText;
    ....
    paths[flightData.flightID] = new Array(flightData.coord1,flightData.coord2);
}

 populateMap = function(){
    ....
    var currentFlight = "ba057"; // get currentflight id
    currentCoords = paths.currentFlight;

    var flightPathCoords = [
        new google.maps.LatLng(currentCoords[0]),
        new google.maps.LatLng(currentCoords[1]),
    ];

    var flightPath = new google.maps.Polyline({
        path: flightPathCoords,
        geodesic: true,
        strokeColor: '#ffff00',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
 }
于 2013-11-30T22:23:09.283 に答える