dessiner dynamiquement des polylignes sur googlemaps en utilisant php/mysql

Question

Je suis nouveau dans l'API googlemaps. J'ai écrit une petite application pour mon téléphone mobile qui met à jour périodiquement son emplacement à une base de données SQL.

Je voudrais afficher cette information sur un googlemap dans mon navigateur. Idéalement, je voudrais ensuite interroger la base de données périodiquement et si de nouveaux co-ord sont arrivés, ajoutez-les à la ligne. La meilleure manière de le décrire est this.

Dans une quête pour y arriver, j'ai commencé les documents sur google et je les ai modifiés pour essayer d'obtenir ce que je veux. Ça ne marche pas - et je ne sais pas assez pour savoir pourquoi. J'adorerais avoir des conseils sur les raisons pour lesquelles, et tout point de vue vers mon but ultime serait très bien accueilli. Google Maps AJAX + MySQL/PHP Exemple

<script type="text/javascript"> 
    //<![CDATA[ 

function load() { 
    if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map")); 
    map.addControl(new GSmallMapControl()); 
    map.addControl(new GMapTypeControl()); 
    map.setCenter(new GLatLng(47.614495, -122.341861), 13); 

    GDownloadUrl("phpsqlajax_genxml.php", function(data) { 
     var xml = GXml.parse(data); 
     var line = []; 
     var markers = xml.documentElement.getElementsByTagName("points"); 
     for (var i = 0; i < points.length; i++) { 
      var point = points.item(i); 
      var lat = point.getAttribute("lat"); 
      var lng = point.getAttribute("lng"); 

      var latlng = new GLatLng(lat, lng); 

     line.push(latlng); 
     if (point.firstChild) { 
     var station = point.firstChild.nodeValue; 
     var marker = createMarker(latlng, station); 
     map.addOverlay(marker); 
     } 
    } 

    var polyline = new GPolyline(line, "#ff0000", 3, 1); 
    map.addOverlay(polyline); 
}); 
} 
//]]> 

Mon fichier php génère le code XML suivant;

<?xml version="1.0" encoding="UTF-8" ?> 
<points> 
<point lng="-122.340141" lat="47.608940"/> 
<point lng="-122.344391" lat="47.613590"/> 
<point lng="-122.356445" lat="47.624561"/> 
<point lng="-122.337654" lat="47.606365"/> 
<point lng="-122.345673" lat="47.612823"/> 
<point lng="-122.340363" lat="47.605961"/> 
<point lng="-122.345467" lat="47.613976"/> 
<point lng="-122.326584" lat="47.617214"/> 
<point lng="-122.342834" lat="47.610126"/> 
</points> 

J'ai travaillé avec succès à cela; http://code.google.com/apis/maps/articles/phpsqlajax.html avant d'essayer de personnaliser le code.

Des pointeurs? Où vais-je mal?

Answer 1

Vous semblez être sur la bonne voie.

Votre script php doit accepter un paramètre d'horodatage et doit vérifier si de nouveaux points ont été insérés dans la base de données après cet horodatage. Si oui, il doit renvoyer une réponse avec la dernière entrée (ou une liste d'entrées après cet horodatage, si vous voulez afficher une trace en direct lorsque le véhicule se déplace).

Sur le côté client, vous pouvez lancer une requête AJAX vers le script côté serveur, en utilisant normal ou long polling, avec le paramètre timestamp de la dernière mise à jour.

Lorsque votre requête AJAX reçoit de nouvelles informations du serveur, vous déplacez simplement vos marqueurs sur la carte. Ensuite, lancez une nouvelle requête AJAX avec le paramètre d'horodatage mis à jour.

exemple pseudocode-ish à l'aide jQuery:

var lastUpdate = '2000/01/01 00:00:00'; 

function autoUpdate() { 
    $.ajax({ 
     type: "GET", 
     url: "phpsqlajax_genxml.php?last_update=" + lastUpdate, 
     dataType: 'xml', 
     success: function(xmlData) { 

      // 1. Check if the xmlData is empty. If not we received 
      // some fresh data. 
      // 2. Update lastUpdate from the xmlData with the timestamp from 
      // the server. Don't use JavaScript to update the timestamp, 
      // because the time on the client and on the server will 
      // never be exactly in sync. 
      // 3. Move the markers on Google Map. 

      // Relaunch the autoUpdate() function in 5 seconds. 
      setTimeout(autoUpdate, 5000); 
     } 
    }); 
}