javascript - 将 xmlhttp 数据用于 Google Maps api v3 折线

Question

我使用 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 中显示折线呢？我已经尝试过搜索谷歌，不幸的是我找不到任何有用的东西。我也尝试过一些事情但没有成功。

谢谢!

编辑:这是我现在正在制作的 map : http://skyline-va.de/phpvms/index.php/acars/viewmapbig
基本上我想做的是，如果您单击其中一架飞机，也应该显示飞行路径。我将坐标存储在数据库中，但我必须在单击平面后进行查询。

编辑2:我设法用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);

但这似乎不起作用。

Answer 1

从您的 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
});

然后使用以下方法将此对象绑定(bind)到 map :

 flightPath.setMap(map);

您现在要做的就是创建一个方法并将其绑定(bind)到航类的 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);
 }