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

usage method:

Browser compatibility check:

This api is published through navigator.geolocation object. Only when this object exists, can its geolocation service be used. The detection methods are as follows:

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

Get the current location of the user:

The getCurrentLocation method can be used to obtain the location information of the user. The method has three parameters:

// Initialization parameters
const options = {
  // High accuracy: true / false
  enableHighAccuracy: true,
  // Maximum time to wait for response unit: ms
  timeout: 5 * 1000,
  // The maximum amount of time an application is willing to accept a cache location
  maximumAge: 0
}

// Success callback function: data contains location information
const handleSuccess = data => console.log(data)

// Failed callback function: error contains error information
const handleError = error => console.log(error)

if (navigator.geolocation) {
    // The location code is written here
    navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options)
} else {
    alert('Geolocation is not supported in your browser')
}

Here is the code with more details:

const handleSuccess = data => {
  const { 
    coords, // position information
    timestamp // Timestamp when location information was acquired successfully
  } = data

  const {
    accuracy, // Precision of returned result (m)
    altitude, // Height relative to horizontal plane
    altitudeAccuracy, // Accuracy of return height (m)
    heading, // Travel direction of main equipment, clockwise from the North
    latitude, // latitude
    longitude, // longitude
    speed // Travel speed of equipment
  } = coords

  // Print it out and have a look
  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 denied')
      break
    case 2:
      console.log('Location information is temporarily unavailable')
      break
    case 3:
      console.log('Get information timeout')
      break
    case 4:
      console.log('unknown error')
      break
  }
}

const opt = {
  // High accuracy: true / false
  enableHighAccuracy: true,
  // Maximum time to wait for response unit: ms
  timeout: 5 * 1000,
  // Maximum age of cache locations that applications are willing to accept
  maximumAge: 0
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(handleSuccess, handleError, opt)
} else {
  alert('Geolocation is not supported in your browser')
}