The H5 method is used to obtain user location information, which is realized in our project without relying on the GPS method provided by a third party. This paper summarizes the drawbacks and problems of using this method in the project.

Problems existing in specific businesses are summarized as follows:

  1. If you accidentally click “do not allow”, you will find that the next time you log into the H5, you will no longer be prompted to ask for location permission.
  2. “Not allowed” is cached. When geolocation is called again, error.PERMISSION_DENIED is reported
  3. This can only be solved by clearing the cache in the system.

To clear the cache:

  • (Set) Settings -> (generic) Genera -> (Reset) Reset-> (Reset) Reset Location & Privacy.
  • (Settings) Settings ->(Privacy) Privacy Enables Location Services.

The code implementation is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, </p> <script type="text/javascript"> </p> <script type="text/javascript"> / * HTML 5 user's location information problems: there is no solution to request positioning, authorized prompt dialog box will pop up, prompted "allow" positioning, allow positioning continue to the next step If accidentally ordered under "not allowed", will find that after the next into the h5 no longer requesting location permissions prompt dialog box. "Not allowed" is cached. When geolocation is called again, error.PERMISSION_DENIED is reported. (Set) Settings ->(generic) Genera ->(Reset) Reset-> (Reset) Reset Location & Privacy. (Set) Settings ->(Privacy) Privacy Enable Location Services. Re-enter the page can prompt user permissions prompt! */ window.onload=function() { const demo = document.getElementById("demo"); If (the navigator. Geolocation) {the navigator. Geolocation. GetCurrentPosition (position = > {/ * position depending on the actual equipment, Timestamp The timestamp at which the position was obtained Position. coords accuracy Accuracy Altitude altitudeAccuracy High precision Heading direction forward Latitude longitude speed speed */ console.log(position, 'return position'); demo.innerHTML="Latitude:" + position.coords.latitude + "; Longitude:" + position.coords.longitude; }, error => {console.log(error, 'return error'); Switch (error.code) {case error.permission_denied: demo.innerHTML=" The geolocation request was rejected "break; Case error.position_unavailable: demo.innerHTML=" Location information is not available "break; Case error.TIMEOUT: demo.innerHTML=" Request for user location timed out "break; Case error.UNKNOWN_ERROR: demo.innerHTML=" unknown error "break; }}, {timeout: 30 * 1000, // Set the request timeout, if the location information is not obtained within this time, return error maximumAge: 5000, // set the browser cache time enableHighAccuracy: False // true For the highest possible accuracy, the request time will be longer}); } else{demo.innerhtml =" not supported by browsers "; } /* watchPosition is used to register listeners, At the time of change in the device's geographical location is invoked automatically * / const id = the navigator. Geolocation. WatchPosition (position = > {the console. The log (position, 1) }) // clearWatch stop watching after 10 seconds setTimeout(() => { navigator.geolocation.clearWatch(id) }, 10 * 1000) } </script> </body> </html>Copy the code