Использовать данные xmlhttp для ломаной линии Google Maps api v3

Я использую 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),

и т. д.
Но как я могу использовать это для отображения ломаной линии в API Карт Google? Я уже пробовал искать в Google, но, к сожалению, ничего полезного не нашел. Я также пробовал несколько вещей, но безуспешно.

Спасибо!

РЕДАКТИРОВАТЬ: вот карта, над которой я работаю прямо сейчас: http://skyline-va.de/phpvms/index.php/acars/viewmapbig
В основном то, что я хочу сделать, - это если вы щелкнете по одной из плоскостей, путь полета также должен отображаться. У меня есть координаты, хранящиеся в базе данных, но я должен выполнить запрос после щелчка по плоскости.

EDIT2: мне удалось вывести данные в формате xml с помощью документального фильма Google. Но я не могу заставить работать код, предоставленный 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);

Но, похоже, это не работает.


mysql google-maps javascript php google-polyline
person LL1997    schedule 30.11.2013    source источник
comment
Вам следует подумать об использовании более подходящего формата (json или xml). В настоящее время возвращенные данные могут обрабатываться только через eval.   -  person Dr.Molle    schedule 01.12.2013
comment
Файл php теперь выводит данные xml, но у меня все еще есть проблемы с отображением ломаной линии на карте.   -  person LL1997    schedule 01.12.2013

Ответы (2)


arrow_upward
0
arrow_downward

из ваших данных 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);
 }
person rand0m    schedule 30.11.2013
comment
Спасибо за Ваш ответ. Проблема в том, что эти координаты динамические. Примерно каждые 30 секунд добавляется одна запись, и в дополнение к этому каждый самолет имеет другой идентификатор и, следовательно, разные записи в базе данных. - person LL1997; 01.12.2013
comment
Я вижу, что вам удалось указать начальную / конечную точки в методе populateMaps. Я предлагаю вам создать глобальный объект, а затем динамически заполнить его параметрами, которые вам нужны в запросе XHR. - person rand0m; 01.12.2013
comment
Спасибо, мне удалось вывести данные в формате xml и отредактировать свой вопрос. - person LL1997; 01.12.2013
comment
Я, наверное, просто не знаю, как это отобразить, потому что если я распечатаю массив, он будет пустым. - person LL1997; 01.12.2013
comment
Массив flightPlanCoordinates? если да, попробуйте убрать это из своей функции и попробовать еще раз? - person rand0m; 01.12.2013
comment
Да, flightPlanCoordinates - это массив, в котором должны храниться все координаты из xml, чтобы впоследствии создать полилинию. Помещение var flightPlanCoordinates = []; перед function downloadUrl(url,callback) { не сработало. - person LL1997; 01.12.2013

arrow_upward
0
arrow_downward

Наконец-то мне удалось заставить все работать. Решение в этом коде:

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

Спасибо всем, кто помог решить эту проблему!

person LL1997    schedule 01.12.2013
comment
рад это слышать! не забудьте использовать flightPath.setMap (null); чтобы скрыть пути по щелчку! - person rand0m; 01.12.2013
comment
Да, я уже это сделал. Код, скрывающий оба пути, находится где-то в другом месте сценария, и это flightPath2.setMap(null);. Спасибо за вашу помощь! - person LL1997; 01.12.2013