WatchPosition: примеры (JAVASCRIPT)

Короткие примеры использования

Базовое отслеживание

Простой вызов с обработкой успеха и ошибки.

const watchId = navigator.geolocation.watchPosition(
  (position) => {
    console.log('Широта:', position.coords.latitude);
    console.log('Долгота:', position.coords.longitude);
  },
  (error) => {
    console.error('Ошибка:', error.message);
  }
);

Широта: 55.7558
Долгота: 37.6173
... (данные обновляются при движении)

С опцией высокой точности

const watchId = navigator.geolocation.watchPosition(
  (pos) => { /* обработка */ },
  (err) => { /* обработка ошибки */ },
  { enableHighAccuracy: true }
);

С ограничением времени ожидания

const watchId = navigator.geolocation.watchPosition(
  success,
  error,
  { timeout: 10000, maximumAge: 60000 }
);

Похожие функции в JavaScript

getCurrentPosition()

Однократно получает текущее местоположение. Используется, когда непрерывное отслеживание не требуется, например, для определения местоположения при загрузке страницы. Более экономичен для ресурсов.

Методы трекинга в сторонних API

Библиотеки, такие как Leaflet или Google Maps JavaScript API, предлагают собственные обертки для геолокации, часто с дополнительными возможностями визуализации. Их предпочтительнее использовать при интеграции с картографическими сервисами.

Альтернативы в других языках программирования

Python (geopy)

Библиотека geopy позволяет определять координаты по адресу, но не отслеживает местоположение устройства в реальном времени, так как Python обычно работает на сервере.

from geopy.geocoders import Nominatim
geolocator = Nominatim(user_agent="my_app")
location = geolocator.geocode("Москва")
print(location.latitude, location.longitude)

55.7558 37.6173

PHP

Серверный язык PHP может получать приблизительное местоположение через IP-адрес, но не имеет прямого аналога watchPosition для отслеживания в реальном времени.

Android (Java/Kotlin)

В Android используются службы LocationManager или API FusedLocationProviderClient для периодического получения координат, что аналогично watchPosition, но требует разрешений в манифесте.

Типичные ошибки

Отсутствие обработки ошибок

Если пользователь отклонит запрос на геолокацию, приложение может завершиться с исключением.

// Неправильно
const watchId = navigator.geolocation.watchPosition(
  (pos) => console.log(pos)
);

Uncaught (in promise) GeolocationPositionError: User denied Geolocation

Утечка ресурсов без остановки

Если не вызывать clearWatch(), отслеживание продолжится даже после ухода со страницы, что расходует заряд батареи.

// Запуск отслеживания
const watchId = navigator.geolocation.watchPosition(...);
// Забыли вызвать:
// navigator.geolocation.clearWatch(watchId);

Слишком строгие параметры timeout

Короткий timeout при медленном получении GPS может приводить к частым ошибкам.

Изменения в последних версиях

Спецификация Geolocation API относительно стабильна. Основные изменения связаны с политиками безопасности браузеров: в современных версиях Chrome и Firefox API доступен только в безопасных контекстах (HTTPS), кроме localhost. Увеличились требования к явному запросу разрешений от пользователя.

Расширенные примеры

Отслеживание с сохранением истории

Сохранение пройденного пути в массив с отрисовкой на карте (псевдокод).

let routeHistory = [];
const watchId = navigator.geolocation.watchPosition(
  (pos) => {
    const point = {
      lat: pos.coords.latitude,
      lng: pos.coords.longitude,
      time: new Date()
    };
    routeHistory.push(point);
    console.log('Точка добавлена:', point);
    // Обновление карты (например, через Leaflet)
    // L.marker([point.lat, point.lng]).addTo(map);
  },
  null,
  { enableHighAccuracy: true, maximumAge: 0 }
);

Интеграция с картами (Google Maps)

let marker;
const watchId = navigator.geolocation.watchPosition(
  (pos) => {
    const latLng = { lat: pos.coords.latitude, lng: pos.coords.longitude };
    if (!marker) {
      marker = new google.maps.Marker({
        position: latLng,
        map: mapInstance
      });
    } else {
      marker.setPosition(latLng);
    }
  },
  null,
  { timeout: 5000 }
);

Адаптивный опрос с учетом скорости

Изменение частоты опроса на основе скорости движения (используя position.coords.speed).

let lastUpdate = 0;
const watchId = navigator.geolocation.watchPosition(
  (pos) => {
    const now = Date.now();
    if (pos.coords.speed > 5) { // Быстро движется
      if (now - lastUpdate > 1000) { // Обновлять каждую секунду
        updateMap(pos);
        lastUpdate = now;
      }
    } else {
      if (now - lastUpdate > 5000) { // Раз в 5 секунд
        updateMap(pos);
        lastUpdate = now;
      }
    }
  }
);