HTML5 Географического расположения
API геолокации HTML используется для определения местоположения пользователя.
Найдите позицию пользователя
API геолокации HTML используется для получения географического положения пользователя.
Поскольку это может скомпрометировать конфиденциальность, позиция недоступна, если пользователь не утвердит ее.
Примечание: Геолокация Наиболее точна для устройств с GPS, таких как iPhone.
Поддержка браузера
Номера в таблице определяют первую версию браузера, которая полностью поддерживает геолокацию.
| API | |||||
|---|---|---|---|---|---|
| Географическое расположение | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Примечание: По состоянию на Chrome 50 API геолокации будет работать только в защищенных контекстах, таких как HTTPS. Если сайт размещен в небезопасном источнике (например, HTTP), запросы на получение местоположения пользователей больше не будут функционировать.
Использование геолокации HTML
Метод 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 = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Пример как работает:
- Проверить, поддерживается ли геолокация
- Если поддерживается, запустите метод getCurrentPosition (). Если нет, отобразите сообщение для пользователя
- Если метод getCurrentPosition () успешен, он возвращает объект координат к функции, указанной в параметре (showPosition)
- Функция showPosition () выводит широту и долготу
Приведенный выше пример является очень простым сценарием геолокации без обработки ошибок.
Обработка ошибок и отклонений
Второй параметр метода getCurrentPosition() используется для обработки ошибок. Он задает функцию для запуска, если не удается получить расположение пользователя:
Пример
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
Отображение результата на карте
Чтобы отобразить результат на карте, вам необходим доступ к картографическим сервисам, таким как карты Google.
В приведенном ниже примере возвращаемые Широта и Долгота используются для отображения местоположения в карте Google (с использованием статического изображения):
Пример
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_:KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Сценарий карты Google
Как показать интерактивную карту Google с маркером, зум и перетащить параметры.
Сведения о местоположении
На этой странице показано, как отображать позицию пользователя на карте.
Геолокация также очень полезна для информации, специфичной для местоположения, например:
- Актуальная местная информация
- Отображение точек интереса рядом с пользователем
- Навигация по очереди (GPS)
Метод getCurrentPosition ()-возвращает данные
Метод getCurrentPosition() возвращает объект на успех. Свойства широты, долготы и точности всегда возвращаются. Другие свойства возвращаются, если они доступны:
| Свойство | Возвращает |
|---|---|
| coords.latitude | Широта в виде десятичного числа (всегда возвращается) |
| coords.longitude | Долгота как десятичное число (всегда возвращается) |
| coords.accuracy | Точность позиции (всегда возвращается) |
| coords.altitude | Высота в метрах выше среднего уровня моря (возвращается при наличии) |
| coords.altitudeAccuracy | Точность высоты позиции (возвращается при наличии) |
| coords.heading | Заголовок как градусов по часовой стрелке от севера (возвращается при наличии) |
| coords.speed | Скорость в метрах в секунду (возвращается при наличии) |
| timestamp | Дата/время ответа (возвращается, если доступно) |
Объект геолокации-другие интересные методы
Объект геолокации также имеет другие интересные методы:
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 = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>