Implement a distance tracker using HTML5 Geolocation

HTML5 Geolocation is used to locate the user's location. So how to implement a distance tracker? My idea is this. The premise is that the browser supports h5 geolocation. On this basis, the user's location is obtained, the user's location is updated, the distance is calculated, and displayed on the page. In this way, a distance tracker is simply implemented to make it clearer for users. You can see the current location directly, which is connected to Baidu Map API.

The page structure is as follows:

 <div id=container> <section> <article> <header> <h1>Your Location</h1> </header> <p class=info id=status>Your browser does not support HTML5 Geolocation. </p> <div class=geostatus> <p id=latitude>Latitude: </p> <p id=longitude>Longitude: </p> <p id=accuracy>Accuracy: </p> <p id =timestamp>Timestamp: </p> <p id=currDist>Current travel distance: </p> <p id=totalDist>Total travel distance: </p> </div> </article> </section> <!-- Baidu map location display--> <div id=allmap></div> </div>

Determine whether the browser supports HTML5 Geolocation

The loadDemo() method is called when the body is loaded. The method determines whether the browser supports HTML5 Geolocation based on navigator.geolocation; if navigator.geolocation is true, then we can start to obtain and update the user's location.

HTML5 can obtain the user's position through the getCurrentPosition() method. But this is only obtained once, so we chose the watchPosition() method, which can return the user's current position and continue to return the updated position when the user moves (just like the GPS on a car).

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

While continuously obtaining the location, the updateLocation method is called to display the location on the page. Of course, the distance calculation method is also called to obtain the distance, and the location on the Baidu map is constantly updated.

 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 = longitude: + longitude;document.getElementById(accuracy).innerHTML = accuracy: + accuracy;document.getElementById(timestamp).innerHTML = timestamp: + timestamp;if(accuracy >= 30000) { updateStatus(Need more accurate values ​​to calculate distance. ); return;}if((lastLat != null) && (lastLong != null)) { var currentDistance = distance(latitude, longitude, lastLat, lastLong); document.getElementById(currDist).innerHTML = Current travel distance: + currentDistance.toFixed(2) + km; totalDistance += currentDistance; document.getElementById(totalDist). innerHTML = total distance traveled: + currentDistance.toFixed(2) + km; updateStatus(Location successfully updated.);}lastLat = latitude;lastLong = longitude;

Put the longitude and latitude of the starting position and the current position into the function as parameters, and calculate the distance (unit: km) through conversion

 Number.prototype.toRadians = function() { return this * Math.PI / 180; }function distance(latitude1, longitude1, latitude2, longitude2) { var R = 6371; var deltaLatitude = (latitude2 - latitude1).toRadians(); var deltaLongitude = (longitude2 - longitude1).toRadians(); latitude1 = 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; return d; }

To use Baidu Map API, you need to register a Baidu account, apply to become a Baidu developer and obtain a key to use related services. According to the documentation, you can know how to use this API. The code is as follows:

 var map = new BMap.Map(allmap); //Create a Map instance map.centerAndZoom(new BMap.Point(longitude, latitude), 14); //Set the center point coordinates and map level map.addControl(new BMap.MapTypeControl ()); //Add map type control map.setCurrentCity(Nanchang); //Display the city, this item must be set map.enableScrollWheelZoom(true); //Enable mouse wheel zoom//The following is the current location label setting var point = new BMap.Point(longitude, latitude); map.centerAndZoom(point, 14 ); var marker = new BMap.Marker(point); //Create a marker map.addOverlay(marker); //Add markers to the map marker.setAnimation(BMAP_ANIMATION_BOUNCE); //Bounce animation//Baidu map API function--------end

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

The above is the editor's introduction to using HTML5 Geolocation to implement a distance tracker. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!