Zeichnen einer Polylinie, die wächst, wenn sich das Auto bewegt, indem Daten aus MySQL und PHP in der Google API übernommen werden

Ich wollte die Polylinie auf Google Map anzeigen, wenn sich das Auto mit Animation bewegt (wie auf dieser Website: http://econym.org.uk/gmap/example_cartrip2.htm ), indem ich Daten aus MySQL und PHP entnehme. Für die i refered den Code von Google - API - Tutorial Zu . Ich habe auch Daten dafür aus meinem SQL genommen, die wie folgt lauten: .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() {}

.php-Datei:

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

?>

Aber jetzt wollte ich Polylinie mit Animation als Show auf der ersten Referenzseite anzeigen. Kann mir jemand einige Referenzen vorschlagen oder mir dabei helfen? Ich erhalte dieses Ergebnis, das korrekt ist, möchte aber eine Animation wie in http://econym.org.uk/gmap/example_cartrip2.htm. Ich hoffe, diesmal wird mein Titel- und Beschreibungsteil verstanden.

Aus den Maps Javascript API-Dokumenten für Polyline (beachten Sie die pathEigenschaft) :

Die geordnete Koordinatenfolge der Polylinie. Dieser Pfad kann entweder mit einem einfachen Array von LatLngs oder mit einem MVCArray von LatLngs angegeben werden. Beachten Sie, dass wenn Sie ein einfaches Array übergeben, es in ein MVCArray konvertiert wird. Durch Einfügen oder Entfernen von LatLngs in das MVCArray wird die Polylinie auf der Karte automatisch aktualisiert .

Wenn ich das wüsste, würde ich es so versuchen:

// 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.
}

Nachträglich sollte jeder GPS-Impuls ein Ereignis auslösen, das Sie möglicherweise an zwei Stellen behandeln müssen / möchten. Wenn Sie die Positionen von Fahrzeugen auf unbestimmte Zeit speichern möchten, müssen Sie sie zunächst serverseitig erfassen und in Ihre Datenbank übertragen. Wenn Sie jedoch nur möchten, dass ein Fahrzeug während der Fahrt eine Linie zieht, können Sie diese Funktionalität im Client beibehalten.