Отслеживайте местоположение пользователя на вашем сайте

Привет всем 👋

В этой статье мы посмотрим, как мы можем получить доступ к местоположению пользователя на нашем веб -сайте.

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

Итак, как мы можем получить доступ к местоположению пользователя?

Современные браузеры предоставляют почти все, что нам нужно в нашем приложении, чтобы улучшить опыт пользователя. И вот идет Geolocation API который является веб -API, предоставленным браузерами, чтобы получить доступ к местоположению пользователя с их согласия.

Живая ссылка, чтобы попробовать это в конце статьи.

Что такое Geolocation API?

Geolocation API это веб -API, который предоставляет веб -контент доступ к местоположению устройства.

Разрешение, необходимое для использования Geolocation API Анкет

Реализация 📍

Давайте поймем реализацию API.

Мы можем получить доступ к API из браузера window.navigator объект.

Проверьте поддержку Geolocation API

if (Boolean(window.navigator.geolocation)) {
  // It supports
  ...
}

Интерфейс геолокации 🗺 ️

Геолокация Это основной метод, который нам нужно получить, чтобы получить, отслеживать, отменить отслеживание местоположения. Он имеет три свойства (методы):

• GetCurrentPosition
• Смотрейка
• ClearWatch

Текущее местоположение 📌

Чтобы получить текущее местоположение устройства, мы будем использовать GetCurrentPosition метод Этот метод пройдет текущий позиция к PositionCallback и в случае Ошибка , он пройдет Ошибка объект errorcallback Анкет

window.navigator.geolocation.getCurrentPosition(
    positionCallback,
    errorCallback
);

Позиция обратного вызова

function positionCallback(position) {
  // Assigning coords object for easier access.
  const coords = position.coords;

  // Position of the longitude .
  const longitude = coords.longitude;

  // Position of the latitude.
  const latitude = coords.latitude;

  // Accuracy of latitude & longitude in meters.
  const accuracy = coords.accuracy;

  // Altitude in meters, relative to sea level.
  const altitude = coords.altitude;

  // Accuracy of the altitude in meters. Value can be null.
  const altitudeAccuracy = coords.altitudeAccuracy;

  // Direction towards which the device is facing. This value specified
  // in degrees clockwise from North. Value can be null.
  const heading = coords.heading;

  // The velocity of the device in m/s. Value can be null.
  const speed = coords.speed;

  // The time at which the location was retrieved.
  const time = position.timestamp;
}

Все значения имеют двойной тип.

Ошибка обратного вызова

function errorCallback(err) {
  let msg;
  switch (err.code) {
    case err.PERMISSION_DENIED:
        msg = "User denied the request for Geolocation.";
        break;
    case err.POSITION_UNAVAILABLE:
        msg = "Location information is unavailable.";
        break;
    case err.TIMEOUT:
        msg = "The request to get user location timed out.";
        break;
    case err.UNKNOWN_ERROR:
        msg = "An unknown error occurred.";
        break;
  }
}

Я думаю, что эта функция очень эксплуатационна. Он просто сравнивает код ошибки с типом ошибки, и мы можем справиться с ней любым способом.

Живое местоположение 🌎

Чтобы отслеживать живое местоположение устройства, мы можем позвонить в WatchPosition метод Этот метод принимает те же аргументы, что и GetCurrentPosition . Метод пройдет обновленный текущий позиция к PositionCallback Поскольку устройство меняет свое местоположение и в случае Ошибка , он пройдет Ошибка объект errorcallback Анкет

const id = window.navigator.geolocation.watchPosition(
   positionCallback,
   errorCallback
);

• WatchPosition Метод возвращает id который мы можем использовать, чтобы прекратить отслеживание.

Прекратите отслеживать 🛑

Чтобы прекратить отслеживать место в прямом эфире, мы можем позвонить в ClearWatch метод Метод ожидает id как аргумент.

window.navigator.geolocation.clearWatch(id);

Пример

Проверьте GitHub Repo Для примера кода.

Попробуйте Здесь Анкет

Мобильные устройства дадут большую точность.

Первоначально опубликовано на blog.bibekkakati.me

Спасибо за чтение 🙏

Если вам понравилась эта статья или нашли ее полезной, дайте ей палец вверх 👍

Не стесняйтесь подключаться 👋

Twitter | Instagram | LinkedIn

Если вам нравится моя работа и вы хотите поддержать ее, вы можете сделать это здесь. Я очень признателю это.

Оригинал: “https://dev.to/bibekkakati/track-user-s-location-on-your-website-58e0”