Геолокация 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;
    }
  }

Попробуйте сами

Код ошибки:

  • Permission denied - пользователь не позволяет геолокацию
  • Position unavailable - не удалось получить текущее положение
  • 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>

Попробуйте сами