Геолокация HTML5

HTML5 Geolocation (геолокация) используется для определения местоположения пользователя.

Попробуйте сами: покажите ваше местоположение на карте Google

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

API Geolocation HTML5 используется для получения географического местоположения пользователя.

Учитывая, что эта функция может нарушать конфиденциальность пользователя, информация о местоположении пользователя недоступна без его согласия.

Поддержка браузеров

Internet Explorer 9, Firefox, Chrome, Safari и Opera поддерживают геолокацию.

Комментарий:Для устройств с GPS, таких как iPhone, геолокация более точна.

HTML5 - Использование геолокации

Используйте метод getCurrentPosition() для получения местоположения пользователя.

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

Пример

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Широта: " + position.coords.latitude +
  "Широта: " + position.coords.longitude;
  }
</script>

Попробуйте亲自

Объяснение примера:

  • Проверка поддержки геолокации
  • Если функция getCurrentPosition() поддерживается, то выполняется. Если не поддерживается, то пользователю отображается сообщение.
  • Если getCurrentPosition() выполняется успешно, то в функцию showPosition() возвращается объект coordinates
  • Функция showPosition() получает и показывает долготу и широту

Этот пример представляет собой一个非常基础的 геолокационный скрипт без обработки ошибок.

Обработка ошибок и отказа

Второй параметр метода getCurrentPosition() используется для обработки ошибок. Он определяет функцию, которая выполняется при失败х в определении местоположения пользователя:

Пример

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Пользователь отказался от запроса на определение геолокации."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Информация о местоположении недоступна."
      break;
    case error.TIMEOUT:
      x.innerHTML="Запрос на получение местоположения пользователя истек по времени."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Произошла неизвестная ошибка."
      break;
    }
  }

Попробуйте亲自

Код ошибки:

  • Недостаточно прав - пользователь не разрешил геолокацию
  • Местоположение недоступно - не удалось получить текущее местоположение
  • Timeout - операция завершена с превышением времени

Показывать результаты на карте

Чтобы показать результаты на карте, вам нужно получить доступ к карте, которая поддерживает координаты, например Google Maps или Baidu Maps:

Пример

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

Попробуйте亲自

В предыдущем примере мы используем возвращенные данные о долготе и широте для отображения местоположения на карте Google (используя статические изображения).

Сценарий Google Maps

Верхние ссылки показывают, как использовать скрипты для отображения интерактивных карт с опциями маркеров, масштабирования и перетаскивания.

Информация о заданном местоположении

На этой странице показано, как можно показать положение пользователя на карте. Однако, геолокация также очень полезна для получения информации о заданном местоположении.

Пример:

  • Обновлять местные данные
  • Показывать интересующие пользователя объекты вокруг
  • Интерактивная система навигации для автомобиля (GPS)

Метод getCurrentPosition() - возвращаемые данные

Если операция успешна, метод getCurrentPosition() возвращает объект. Всегда возвращаются атрибуты latitude, longitude и accuracy. Если они доступны, возвращаются и другие атрибуты.

Атрибуты Описание
coords.latitude Десятичное значение широты
coords.longitude Десятичное значение долготы
coords.accuracy Точность местоположения
coords.altitude Высота над уровнем моря, измеренная в метрах
coords.altitudeAccuracy Точность высоты местоположения
coords.heading Направление, измеренное от истинного севера в градусах
coords.speed Скорость, измеренная в метрах в секунду
timestamp Ответная дата/время

Объект Geolocation - другие интересные методы

watchPosition() - возвращает текущее местоположение пользователя и продолжает возвращать обновления местоположения пользователя при движении (как GPS в автомобиле).

clearWatch() - останавливает метод watchPosition()

Ниже приведен пример использования метода watchPosition(). Для тестирования этого примера вам потребуется точное GPS-устройство (например, iPhone):

Пример

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Широта: " + position.coords.latitude +
  "Широта: " + position.coords.longitude;
  }
</script>

Попробуйте亲自