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();

查看萤火虫控制台，我看到它以这种格式输出数据

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 基本上我想要做的是如果你点击其中一架飞机，飞行路径也应该显示。我将坐标存储在数据库中，但我必须在单击飞机后进行查询。

EDIT2：我设法用谷歌纪录片以 xml 格式输出数据。但是我无法让谷歌提供的代码来显示数据。我想将通过 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 回答
0

我终于设法让一切正常。解决方案是这段代码：

var flightPlanCoordinates = [
 ];
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/output-xml.php?id="+this.flightdetails.id,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
 var markers = xmlDoc.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
  flightPlanCoordinates[i] = new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng"));
}

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

感谢所有帮助解决这个问题的人！

于 2013-12-01T12:12:34.540 回答