Dessin d'une polyligne qui grandit au fur et à mesure que la voiture se déplace en prenant des données de MySql et PHP dans l'API Google

Je voulais montrer la polyligne sur google map lorsque la voiture se déplace avec animation (comme sur ce site: http://econym.org.uk/gmap/example_cartrip2.htm ) en prenant des données de MySQL et PHP. Pour cela, je me suis référé au code du tutoriel Google API Polyline . J'ai également pris des données pour cela de mon SQL qui est comme suit: .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() {}

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

?>

Mais maintenant, je voulais montrer la polyligne avec animation comme le montre le premier site de références. Quelqu'un peut-il me suggérer des références ou m'aider à en faire autant. J'obtiens ce résultat qui est correct mais je veux une animation dedans comme dans http://econym.org.uk/gmap/example_cartrip2.htm J'espère que cette fois ma partie titre et description est comprise.

À partir des documents de l'API Maps Javascript pour Polyline (notez la pathpropriété) :

La séquence ordonnée de coordonnées de la polyligne. Ce chemin peut être spécifié à l'aide d'un simple tableau de LatLngs ou d'un MVCArray de LatLngs. Notez que si vous passez un tableau simple, il sera converti en un MVCArray L' insertion ou la suppression de LatLngs dans le MVCArray mettra automatiquement à jour la polyligne sur la carte .

Sachant cela, je l'essayerais comme ceci:

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

Après coup, chaque impulsion GPS devrait envoyer un événement que vous pourriez avoir besoin / souhaitez gérer à deux endroits. Tout d'abord, si vous souhaitez stocker les positions des véhicules indéfiniment, vous devrez les collecter côté serveur et les insérer dans votre base de données. Cependant, si vous voulez simplement qu'un véhicule trace une ligne pendant qu'il se déplace, vous pouvez conserver cette fonctionnalité dans le client.