Малювання полілінії, яка зростає в міру руху автомобіля, беручи дані з MySql та PHP в Google API

Я хотів показати полілінію на Google Map, коли автомобіль рухається з анімацією (як на цьому веб-сайті: http://econym.org.uk/gmap/example_cartrip2.htm ), беручи дані з MySQL та PHP. Для цього я посилався на код з підручника Google API Polyline . Я також взяв дані для цього з мого SQL, який є наступним: .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 файл:

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

?>

Але тепер я хотів показати полілінію з анімацією, як показати на 1-й довідці site.Can хтось запропонує мені деякі посилання або допоможе мені в тому ж. Я отримую цей результат, який є правильним, але хочу, щоб в ньому була анімація, як у http://econym.org.uk/gmap/example_cartrip2.htm Сподіваюся, що цього разу моя назва та частина опису зрозумілі.

З документів API Javascript Maps для Polyline (зверніть увагу на pathвластивість) :

Впорядкована послідовність координат Полілінії. Цей шлях може бути визначений за допомогою простого масиву LatLngs, або MVCArray LatLngs. Зауважте, що якщо ви передасте простий масив, він буде перетворений на MVCArray Вставлення або видалення LatLngs в MVCArray автоматично оновить полілінію на карті .

Знаючи це, я б спробував це так:

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

З подальшої думки кожен імпульс GPS повинен відправляти подію, з якою вам може знадобитися / хочете обробитись у двох місцях. По-перше, якщо ви хочете зберігати місця транспортних засобів на невизначений термін, вам потрібно зібрати їх на стороні сервера та занести їх у вашу базу даних. Однак якщо ви просто хочете, щоб транспортний засіб малював лінію під час подорожі, ви можете зберегти цю функціональність у клієнта.