Используем HTML5 Geolocation API

Автор: | 18.02.2013

HTML5 Geolocation API дает возможность пользователям обмениваться информацией о их местоположении (координаты долготы и широты в браузере) в веб-приложениях.

Для этого пользователь должен разрешить возможность определения своего расположения.

Geolocation API поддерживается большеством современных браузеров: Firefox 3.5+, Opera 10.6+, Chrome 5+, Safari 5+ и Internet Explorer 9+.

В этой заметке я расскажу как использовать эту возможность с различными API карт.

Первое, Вы должны проверить поддерживает или нет HTML5 Geolocation API браузер пользователя.

Это можно сделать с помощью кода:

<script type="text/javascript">
if(navigator.geolocation) {
    alert("Geolocation API поддерживается");
} else {
    alert("Geolocation API не поддерживается в вашем браузере");
}
</script>

Определить местоположение пользователя можно, используя следующий код:

navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
        }

Соединим два примера кода в один, получим простейший пример определения положения пользователя:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Geolocation API</title>
 
<script type="text/javascript">
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
			alert(latitude+' '+longitude);
});
 
} else {
    alert("Geolocation API не поддерживается в вашем браузере");
}
</script>
 
</head>
 
<body>
<p>Пример определения местоположения пользователя - HTML5 Geolocation API</p>
</body>
</html>

Посмотреть пример в действии

При просмотре примера в верху окна браузера может появиться информационная панель вида:

Информационная панель с сообщением

Нужно разрешить сообщить местоположение.

Тогда мы увидим окно с координатами

Окно с координатами

Информативней, если местоположение будет сразу показано на карте.

Рассмотрим как это можно сделать, используя различные API карт (Google, Bing , Nokia Maps, Яндекс.Карты и OpenStreetMap).

1. Пример с использованием API Яндекс.Карт

HTML5 Geolocation API - Яндекс.Карты

Посмотреть пример в действии

2. Пример с использованием API Google Maps

HTML5 Geolocation API - Google Maps

Посмотреть пример в действии

3. Пример с использованием API Bing Maps

HTML5 Geolocation API и Bing Maps

Посмотреть пример в действии

4. Пример с использованием API Nokia Maps

HTML5 Geolocation и Nokia Maps

Посмотреть пример в действии

5. Пример с использованием OpenStreetMap и библиотеки Leaflet

HTML5 Geolocation и OpenStreetMap

Посмотреть пример в действии

6. Пример с использованием OpenStreetMap и API Яндекс.Карт

HTML5 Geolocation - OpenStreetMap - Яндекс.Карты

Посмотреть пример в действии

Загрузить архив с файлами примеров

Для написания заметки использовалась статья: «Using HTML5 Geolocation API with Google, Bing and Nokia Maps».

Используем HTML5 Geolocation API: 3 комментария

  1. Андрей

    А как с помощью данной функции реализовать поиск ближайшего магазина (всего их ~30) в зависимости от местонахождения юзера?

  2. Константин

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

  3. Иван

    А название города из каких API карт легче выдернуть. чтобы показывать информацию для нужного города?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *