Dibujo de polilínea que crece a medida que el automóvil se mueve al tomar datos de MySql y PHP en la API de Google

9

Quería mostrar la polilínea en Google Map a medida que el automóvil se mueve con animación (como en este sitio: http://econym.org.uk/gmap/example_cartrip2.htm ) tomando datos de MySQL y PHP. Para eso remití el código del tutorial API de Google Polyline . También tomé datos para esto de mi SQL, que es el siguiente: .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() {}

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

?>

Pero ahora quería mostrar polilínea con animación como se muestra en el primer sitio de referencias. ¿Puede alguien sugerirme algunas referencias o ayudarme en el mismo? Estoy obteniendo este resultado que es correcto pero quiero animación en él como en http://econym.org.uk/gmap/example_cartrip2.htm ingrese la descripción de la imagen aquí Espero que esta vez se entienda mi parte del título y la descripción.

Pari
fuente

Respuestas:

2

De los documentos de la API de JavaScript de Maps para Polyline (tenga en cuenta la pathpropiedad) :

La secuencia ordenada de coordenadas de la polilínea. Esta ruta se puede especificar utilizando una matriz simple de LatLngs o una matriz MVCAr de LatLngs. Tenga en cuenta que si pasa una matriz simple, se convertirá en una MVCArray Al insertar o eliminar LatLngs en la MVCArray se actualizará automáticamente la polilínea en el mapa .

Sabiendo eso, lo probaría así:

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

Como una ocurrencia tardía, cada pulso GPS debe enviar un evento que pueda necesitar / querer manejar en dos lugares. Primero, si desea almacenar las posiciones de los vehículos de forma indefinida, deberá recopilarlas del lado del servidor e insertarlas en su base de datos. Sin embargo, si solo desea que un vehículo dibuje una línea mientras viaja, puede mantener esa funcionalidad en el cliente.

elrobis
fuente
Gracias por responder, pero tendré un almacén de datos en mi base de datos, es decir, MySQL. No quiero el seguimiento en vivo, sino el historial de dónde se ha movido mi vehículo, para eso quería mostrar la animación de la pista como en este ejemplo ( econym.org.uk/gmap/example_cartrip2.htm ). Quería agregar animación a los datos almacenados. donde la imagen del automóvil (es decir, png) se moverá y la huella del vehículo se dibujará a medida que esta imagen se mueva como en el primer enlace.
Pari