Echtzeit-GPS-Tracker auf JUST HTML/JS und Google Maps auf einem Handphone ausgeführt werden? Ist es möglich?

Question

Ich habe gelesen auf GPS-Echtzeit-Tracking und erfuhr mehrere Dinge darüber, meist benötigt PHP, Zope und eine Datenbank, um die eingehenden Daten zu speichern. Einige andere Methoden verwenden Ajax mit Beziehungen zu PHP.

In Bezug auf meine Frage, ist es möglich, nur mit HTML und JS, mit Markern oder irgendetwas anderes, um die Google Map zu füllen, wenn Sie irgendwo in der Stadt bewegen? Brauchen Sie Hilfe, Danke!

Answer 1

Ja, es ist möglich. Die meisten Browser in den neuesten Smartphones haben die W3C Geolocation API implementiert:

Die Geolocation-API definiert eine Schnittstelle auf hoher Ebene zu Standortinformationen assoziiert nur mit dem Gerät die Umsetzung, wie Breiten- und Längen Hosting. Die API selbst ist unabhängig von den zugrunde liegenden Standortinformationsquellen. Zu den üblichen Quellen für Standortinformationen gehören das Global Positioning System (GPS) und der Ort, der aus Netzwerk-Signalen wie IP-Adresse, RFID, WiFi und Bluetooth MAC-Adressen und GSM/CDMA-Zellen-IDs sowie Benutzereingaben abgeleitet wird. Es wird keine Garantie gegeben, dass die API den tatsächlichen Standort des Geräts zurückgibt.

Die API wurde entwickelt, um sowohl "One-Shot" -Positionsanforderungen als auch wiederholte Positionsaktualisierungen zu ermöglichen, sowie die Möglichkeit, die zwischengespeicherten Positionen explizit abzufragen.

Mit der Geolocation API einen Punkt auf Google Maps zu zeichnen, wird in etwa so aussehen:

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 

    var point = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 

    // Initialize the Google Maps API v3 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: point, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    // Place a marker 
    new google.maps.Marker({ 
     position: point, 
     map: map 
    }); 
    }); 
} 
else { 
    alert('W3C Geolocation API is not available'); 
} 

Die oben wird nur die Position einmal sammeln, und wird nicht automatisch aktualisiert, wenn Sie in Bewegung. Um dies zu handhaben, müssen Sie einen Verweis auf Ihren Marker beibehalten, die Methode getCurrentPosition() regelmäßig aufrufen und den Marker an die neuen Koordinaten verschieben. Der Code wie folgt aussehen könnte:

// Initialize the Google Maps API v3 
var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var marker = null; 

function autoUpdate() { 
    navigator.geolocation.getCurrentPosition(function(position) { 
    var newPoint = new google.maps.LatLng(position.coords.latitude, 
              position.coords.longitude); 

    if (marker) { 
     // Marker already created - Move it 
     marker.setPosition(newPoint); 
    } 
    else { 
     // Marker does not exist - Create it 
     marker = new google.maps.Marker({ 
     position: newPoint, 
     map: map 
     }); 
    } 

    // Center the map on the new position 
    map.setCenter(newPoint); 
    }); 

    // Call the autoUpdate() function every 5 seconds 
    setTimeout(autoUpdate, 5000); 
} 

autoUpdate(); 

Wenn nun durch Verfolgen Sie bedeuten, dass Sie diese Informationen auch auf einem Server gespeichert werden sollte (so, dass jemand anderes sehen konnte man von einem entfernten Standort zu bewegen), dann würden Sie müssen die Punkte mit AJAX an ein serverseitiges Skript senden.

Darüber hinaus sicherstellen, dass die Google Maps API Terms of Use diese Verwendung zulassen, bevor Sie in einem solchen Projekt engagieren.

---

UPDATE: Das Geolokation W3C API stellt eine watchPosition() Methode, die anstelle des setTimeout() Mechanismus verwendet werden, kann man in dem obigen Beispiel verwendet.