Correct use of HTML5 Geolocation API

Geolocation is a Web API under the HTML5 standard. You can use it to obtain the current location information (coordinates) of the device. This API has three methods: getCurrentPosition, watchPosition and clearWatch. The most commonly used method is the getCurrentPosition method. The remaining two methods require Use together!

Browser compatibility check:

The API is published through the navigator.geolocation object. Only when this object exists can its geolocation service be used. The detection method is as follows:

 if (navigator.geolocation) { // Positioning code is written here} else { alert('Geolocation is not supported in your browser')}

Get the user's current location:

Use the getCurrentLocation method to obtain the user's location information. This method has three parameters:

 // Initialization parameters const options = { // High accuracy: true / false enableHighAccuracy: true, // Maximum time to wait for response unit: milliseconds timeout: 5 * 1000, // The longest cache location the application is willing to accept Time maximumAge: 0}// Success callback function: data contains location information const handleSuccess = data => console.log(data)// Failure callback function: error contains error information const handleError = error => console.log(error)if (navigator.geolocation) { // The positioning code is written here navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options)} else { alert('Geolocation is not supported in your browser')}

Here's the code with more details:

 const handleSuccess = data => { const { coords, // Location information timestamp // Timestamp when location information is successfully obtained} = data const { accuracy, // Accuracy of the returned result (meters) altitude, // Relative to the horizontal plane Altitude altitudeAccuracy, // Returns the altitude accuracy (meters) heading, // The direction of travel of the host device, clockwise from north latitude, // Latitude longitude, // Longitude speed // The traveling speed of the device} = coords // Print it out and see console.log('timestamp =', timestamp) console.log('accuracy =', accuracy) console.log('altitude =', altitude) console.log( 'altitudeAccuracy =', altitudeAccuracy) console.log('heading =', heading) console.log('latitude =', latitude) console.log('longitude =', longitude) console.log('speed =', speed)}const handleError = error => { switch (error.code) { case 1: console.log('Location service request rejected') break case 2: console.log(' The location information cannot be obtained temporarily') break case 3: console.log('Timeout to obtain information') break case 4: console.log('Unknown error') break }}const opt ​​= { // High accuracy: true / false enableHighAccuracy: true, // Maximum time to wait for a response Unit: milliseconds timeout: 5 * 1000, // The maximum age of the cache location that the application is willing to accept maximumAge: 0} if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handleSuccess, handleError, opt) } else { alert('Geolocation is not supported in your browser')}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.