Rysowanie polilinii, która rośnie wraz z ruchem samochodu, poprzez pobieranie danych z MySql i PHP w Google API

Chciałem pokazać polilinię na mapie Google, gdy samochód porusza się z animacją (jak na tej stronie: http://econym.org.uk/gmap/example_cartrip2.htm ), pobierając dane z MySQL i PHP. W tym celu zapoznałem się z kodem z samouczka Google API Polyline . Pobrałem również dane do tego z mojego SQL, który jest następujący: .html

function load() {
    var point;
                    var flightPlanCoordinates=new Array();
            var map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(18.33, 73.55),
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                 },
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                }
            });

            downloadUrl("xmltry.php", function(data) {
        var xml = data.responseXML;

        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lon")));
            flightPlanCoordinates[i]=point;
          }
          var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);

      });

        }

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

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }
    function doNothing() {}

plik .php:

<?php
//require("phpsqlajax_dbinfo.php");
include 'common_db.inc';
// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 

// Opens a connection to a MySQL server

$connection=mysql_connect ("$dbserver", "$dbuser", "$dbpass");
if (!$connection) {  die('Not connected : ' . mysql_error());} 

// Set the active MySQL database

$db_selected = mysql_select_db($dbname, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
} 

// Select all the rows in the markers table

$query = "SELECT  `lat`, `lon` FROM current_location Where Device_ID='HGS1005'";
$result = mysql_query($query);
if (!$result) {  
  die('Invalid query: ' . mysql_error());
} 

header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){  
  // ADD TO XML DOCUMENT NODE  
  $node = $dom->createElement("marker");  
  $newnode = $parnode->appendChild($node);  
  $newnode->setAttribute("lat", $row['lat']);  
  $newnode->setAttribute("lon", $row['lon']);  
  } 

echo $dom->saveXML();

?>

Ale teraz chciałem pokazać polilinię z animacją jako pokaz w pierwszej witrynie z odnośnikami. Czy ktoś może zasugerować mi jakieś odniesienia lub pomóc w tym samym. Otrzymuję ten wynik, który jest poprawny, ale chcę w nim animację, jak w http://econym.org.uk/gmap/example_cartrip2.htm Mam nadzieję, że tym razem mój tytuł i część opisu zostaną zrozumiane.

Z dokumentów API API Maps dla Polyline (zwróć uwagę na pathwłaściwość) :

Uporządkowana sekwencja współrzędnych polilinii. Ścieżkę tę można określić za pomocą prostej tablicy LatLngs lub MVCArray of LatLngs. Zauważ, że jeśli przejdziesz prostą tablicę, zostanie ona przekonwertowana na MVCArray Wstawienie lub usunięcie LatLngs w MVCArray spowoduje automatyczną aktualizację polilinii na mapie .

Wiedząc o tym, spróbuję tak:

// I assume you've got your GPS signal pumping updates to your client.
// Insert a new GPS point into your Polyline's point array.
function OnGpsPulse(newLat, newLon)
{
  // Insert a new point at the end of the LatLng Array.
  pointIndex = flightPlanCoordinates.length;      
  flightPlanCoordinates[pointIndex]=new google.maps.LatLng(newLat, newLon);

  // And the line should automatically update in the map.
}

W dalszej kolejności każdy impuls GPS powinien wywoływać zdarzenie, które możesz potrzebować / zechcesz obsłużyć w dwóch miejscach. Po pierwsze, jeśli chcesz przechowywać pozycje pojazdów w nieskończoność, musisz zebrać je po stronie serwera i wepchnąć je do swojej bazy danych. Jeśli jednak chcesz, aby pojazd rysował linię podczas jazdy, możesz zachować tę funkcjonalność w kliencie.