Узнайте, как определить местоположение пользователя в JavaScript

Часто нам нужно определить текущее местоположение пользователя при работе с JavaScript. Это может быть важно в различных сценариях, когда нам требуется местоположение пользователя, не вызывая никаких прерываний, например, предлагая ему ввести его вручную. Кроме того, бывают случаи, когда нам нужна максимальная точность и аккуратность в определении текущего местоположения пользователя.

По умолчанию современные браузеры не предоставляют доступ к местоположению пользователя без явного разрешения. Это исключительно из соображений конфиденциальности. При попытке отследить их местоположение браузер предложит пользователю предоставить доступ и разрешить отслеживание их местоположения.

API геолокации

API геолокации позволяет пользователям делиться своим точным местоположением при наличии разрешения. Чтобы использовать API геолокации, мы просто вызываем navigator.geolocation, который автоматически определяет наиболее подходящий метод определения текущего местоположения устройства.

Чтобы получить текущее местоположение, мы можем использовать geolocation.getCurrentPosition() и geolocation.watchPosition(). Первый извлекает текущее местоположение устройства, а второй постоянно отслеживает положение и обновляет его при каждом изменении.

Получить текущую позицию устройства

<script setup>
// Geolocation options
const geolocationOptions = {
  enableHighAccuracy: true,// Indicates whether to try to retrieve the most accurate position available. Setting this to 'true' may result in a longer response time.
  timeout: 5000, // Maximum time (in milliseconds) allowed for retrieving the location. If the location retrieval takes longer than this value, the 'handleGeolocationError' function will be called.
  maximumAge: 0, // Maximum age (in milliseconds) of a cached position that can be considered valid. If set to '0', the geolocation API will always request a fresh position from the device's location sensors.
};

// Function to handle successful geolocation retrieval
function handleGeolocationSuccess(position) {
  const coordinates = position.coords;

  // Display latitude, longitude, and accuracy
  console.log("Your current position is:")…