Disegnare la polilinea che cresce man mano che la macchina si sposta prendendo i dati da MySql e PHP nell'API di Google


9

Volevo mostrare la polilinea su google Map mentre l'auto si muove con l'animazione (come in questo sito: http://econym.org.uk/gmap/example_cartrip2.htm ) prendendo i dati da MySQL e PHP. Per questo ho fatto riferimento al codice dal tutorial dell'API di Google Polyline . Ho anche preso i dati per questo dal mio SQL che è il seguente: .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();

?>

Ma ora volevo mostrare la polilinea con l'animazione come mostra nel primo sito di riferimenti. Qualcuno può suggerirmi alcuni riferimenti o aiutarmi nello stesso. Sto ottenendo questo risultato che è corretto, ma voglio l'animazione in esso come in http://econym.org.uk/gmap/example_cartrip2.htm inserisci qui la descrizione dell'immagine Spero che questa volta il mio titolo e la descrizione siano compresi.

Risposte:


2

Dai documenti API di Maps Javascript per Polyline (notare la pathproprietà) :

La sequenza ordinata di coordinate della polilinea. Questo percorso può essere specificato utilizzando una semplice matrice di LatLng o un MVCArray di LatLng. Notare che se si passa un array semplice, questo verrà convertito in un array MVCA. L' inserimento o la rimozione di LatLng nel MVCArray aggiornerà automaticamente la polilinea sulla mappa .

Sapendolo, lo proverei così:

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

Come ripensamento, ogni impulso GPS dovrebbe inviare un evento che potrebbe essere necessario / che si desidera gestire in due punti. Innanzitutto, se si desidera memorizzare le posizioni dei veicoli a tempo indeterminato, è necessario raccoglierle sul lato server e inserirle nel database. Tuttavia, se si desidera solo che un veicolo tracci una linea mentre viaggia, è possibile mantenere tale funzionalità nel client.


Grazie per la risposta, ma avrò un archivio dati nel mio database ieMySQL. Non voglio il monitoraggio in tempo reale ma la cronologia di dove si è spostato il mio veicolo, per questo volevo mostrare l'animazione della traccia come in questo esempio ( econym.org.uk/gmap/example_cartrip2.htm ). Volevo aggiungere l'animazione ai dati memorizzati. dove si sposterà l'immagine dell'auto (cioè png) e la traccia del veicolo traccerà mentre l'immagine si sposta come nel primo collegamento.
Pari,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.