How to obtain user geolocation in h5

This time I will show you how to obtain user geolocation using h5, and how to obtain user geolocation using h5? What are the precautions for h5 to achieve user geolocation? The following is a practical case, let’s take a look.

In a recent project, there is a function to obtain surrounding merchants, which requires the use of a geolocation system.

So I thought of using h5 geolocation and checked the information. Finally, the code is simply encapsulated.

const getPosition = (
  timeout = 10000,
  maximumAge = 60000,
  enableHighAcuracy = false) => new Promise((resolve, reject) => {
  if (!navigator && !navigator.geolocation)  {
    return reject(new Error('geolocation api not supported'))
  }
 
  const success = (loc) => {
      const location = {
        latitude: loc.coords.latitude,  // 纬度
        longitude: loc.coords.longitude,  // 经度
        accuracy: loc.coords.accuracy // 精确度
      }
      resolve(location)
  }
 
  const error = () => reject('出错了')
 
  navigator.geolocation.getCurrentPosition(success, error, {
    enableHighAcuracy,  // 指示浏览器获取高精度的位置，默认为false
    timeout,  // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
    maximumAge // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
  })
})
 
// 使用示例
getPosition()
.then(pos => pos)
.catch(err => console.log(err))

h5's API for obtaining the geographical location is indeed very useful, but since obtaining the user's geographical location belongs to the user's privacy, it requires the user's authorization.

Whether the user refuses or allows authorization, the site will be cached by the browser, and the user will not be asked again the next time he visits, unless the user manually removes the provision. The address to remove rules in Chrome is in settings.

In addition, if the user refuses, you can obtain the latitude and longitude by selecting ip. Generally, the error will be relatively large.

ipip.net is a user's geographical location that can be obtained through ip Information website.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to implement mobile adaptation of h5

How to use localStorage and sessionStorage

How to implement H5 mobile phone scanning

The above is the detailed content of How to obtain user geolocation in h5. For more information, please follow other related articles on the PHP Chinese website!