Menggambar polyline yang tumbuh saat mobil bergerak dengan mengambil data dari MySql dan PHP di Google API

Saya ingin menunjukkan polyline di Google Map ketika mobil bergerak dengan animasi (seperti di situs ini: http://econym.org.uk/gmap/example_cartrip2.htm ) dengan mengambil data dari MySQL dan PHP. Untuk itu saya merujuk kode tutorial Polyline dari Google API . Saya juga telah mengambil data untuk ini dari SQL saya yaitu sebagai berikut: .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() {}

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

?>

Tapi sekarang saya ingin menunjukkan polyline dengan animasi seperti yang ditunjukkan di situs referensi pertama. Dapatkah ada yang menyarankan saya beberapa referensi atau bantu saya dalam hal yang sama. Saya mendapatkan hasil ini yang benar tetapi ingin animasi di dalamnya seperti di http://econym.org.uk/gmap/example_cartrip2.htm Semoga kali ini judul dan deskripsi saya dipahami.

Dari dokumen Maps Javascript API untuk Polyline (perhatikan pathproperti) :

Urutan koordinat koordinat Polyline. Jalur ini dapat ditentukan dengan menggunakan array sederhana dari LatLngs, atau MVCArray dari LatLngs. Perhatikan bahwa jika Anda melewatkan larik sederhana, itu akan dikonversi menjadi MVCArray Memasukkan atau menghapus LatLngs di MVCArray akan secara otomatis memperbarui polyline di peta .

Mengetahui hal itu, saya akan mencobanya seperti ini:

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

Sebagai renungan, setiap pulsa GPS harus mengirimkan acara yang mungkin perlu / ingin Anda tangani di dua tempat. Pertama, jika Anda ingin menyimpan posisi kendaraan tanpa batas, Anda harus mengumpulkannya di sisi server dan mendorongnya ke dalam basis data Anda. Namun, jika Anda hanya ingin kendaraan menarik garis saat bepergian, Anda dapat menyimpan fungsionalitas itu di klien.