Implementieren Sie einen Entfernungstracker mit HTML5-Geolokalisierung

HTML5-Geolokalisierung wird verwendet, um den Standort des Benutzers zu lokalisieren. Wie implementiert man also einen Distanz-Tracker? Meine Idee ist, dass der Browser die h5-Geolokalisierung unterstützt, den Standort des Benutzers aktualisiert, die Entfernung berechnet und auf der Seite anzeigt Einfach implementiert, um es für Benutzer klarer zu machen. Sie können den aktuellen Standort direkt sehen, der mit der Baidu Map API verbunden ist.

Der Seitenaufbau ist wie folgt:

 <div id=container> <section> <article> <header> <h1>Ihr Standort</h1> </header> <p class=info id=status>Ihr Browser unterstützt keine HTML5-Geolokalisierung. </p> <div class=geostatus> <p id=latitude>Breitengrad: </p> <p id=longitude>Längengrad: </p> <p id=accuracy>Genauigkeit: </p> <p id = timestamp>Zeitstempel: </p> <p id=currDist>Aktuelle Reisedistanz: </p> <p id=totalDist>Gesamtreisedistanz: </p> </div> </article> </section> <!-- Baidu-Kartenstandortanzeige--> <div id=allmap></div> </div>

Stellen Sie fest, ob der Browser HTML5 Geolocation unterstützt

Die Methode „loadDemo()“ wird aufgerufen, wenn der Text geladen wird. Die Methode bestimmt, ob der Browser HTML5-Geolokalisierung unterstützt. Wenn „navigator.geolocation“ wahr ist, können wir damit beginnen, den Standort des Benutzers abzurufen und zu aktualisieren.

HTML5 kann die Position des Benutzers über die Methode getCurrentPosition() ermitteln. Dies wird jedoch nur einmal abgerufen, daher haben wir die Methode watchPosition() gewählt, die die aktuelle Position des Benutzers zurückgeben kann und weiterhin die aktualisierte Position zurückgibt, wenn sich der Benutzer bewegt (genau wie das GPS eines Autos).

 navigator.geolocation.watchPosition(updateLocation, handleLocationError, { timeout: 10000 });

Während der Standort kontinuierlich abgerufen wird, wird die updateLocation-Methode aufgerufen, um den Standort auf der Seite anzuzeigen. Natürlich wird auch die Entfernungsberechnungsmethode aufgerufen, um die Entfernung zu ermitteln, und der Standort auf der Baidu-Karte wird ständig aktualisiert.

 var Latitude = position.coords.latitude;var Longitude = position.coords.longitude;var Accuracy = position.coords.accuracy;var timestamp = position.timestamp;document.getElementById(latitude).innerHTML = Latitude: + Latitude;document. getElementById(longitude).innerHTML = Längengrad: + longitude;document.getElementById(accuracy).innerHTML = Genauigkeit: + Genauigkeit;document.getElementById(timestamp).innerHTML = Timestamp: + timestamp;if(accuracy >= 30000) { updateStatus(Benötigen Sie genauere Werte, um die Entfernung zu berechnen. ); return;}if((lastLat != null) && (lastLong != null)) { var currentDistance = distance(latitude, longitude, lastLat, lastLong); document.getElementById(currDist).innerHTML = Aktuelle Reisedistanz: + currentDistance.toFixed(2) + km; innerHTML = zurückgelegte Gesamtstrecke: + currentDistance.toFixed(2) + km updateStatus(Location erfolgreich aktualisiert.);}lastLat = width;lastLong = longitude;

Geben Sie den Längen- und Breitengrad der Startposition und der aktuellen Position als Parameter in die Funktion ein und berechnen Sie die Entfernung (Einheit: km) durch Konvertierung

 Number.prototype.toRadians = function() { return this * Math.PI / 180 }function distance(latitude1, longitude1, broaditude2, longitude2) { var deltaLatitude = (latitude2 - width1).toRadians(); var deltaLongitude = (Längengrad2 - Längengrad1).toRadians(); Breitengrad1 = Latitude1.toRadians(), Latitude2 = Latitude2.toRadians(); var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math .sin(deltaLongitude / 2) * Math.sin(deltaLongitude / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c;

Um die Baidu Map API verwenden zu können, müssen Sie ein Baidu-Konto registrieren, sich als Baidu-Entwickler bewerben und einen Schlüssel zur Nutzung der zugehörigen Dienste erhalten. Der Dokumentation zufolge können Sie wissen, wie diese API verwendet wird.

 var map = new BMap.Map(allmap); //Eine Karteninstanz erstellen map.centerAndZoom(new BMap.Point(longitude, width), 14); //Legen Sie die Mittelpunktkoordinaten und die Kartenebene fest .MapTypeControl ()); // Kartentypsteuerung hinzufügen map.setCurrentCity(Nanchang); // Zeigt die Stadt an, dieses Element muss festgelegt werden (point, 14 ); var marker = new BMap.Marker(point); //Erstelle eine Markierung map.addOverlay(marker); //Markierungen zur Karte hinzufügen marker.setAnimation(BMAP_ANIMATION_BOUNCE); //Bounce-Animation//Baidu-Karten-API-Funktion--------end

 <script type=text/javascript src=http://api.map.baidu.com/api?v=2.0&ak=your key></script>

Das Obige ist die Einführung des Herausgebers in die Verwendung von HTML5 Geolocation zur Implementierung eines Distanz-Trackers. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!