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 Яндекс.Карт
2. Пример с использованием API Google Maps
3. Пример с использованием API Bing Maps
4. Пример с использованием API Nokia Maps
5. Пример с использованием OpenStreetMap и библиотеки Leaflet
6. Пример с использованием OpenStreetMap и API Яндекс.Карт
Загрузить архив с файлами примеров
Для написания заметки использовалась статья: «Using HTML5 Geolocation API with Google, Bing and Nokia Maps».
А как с помощью данной функции реализовать поиск ближайшего магазина (всего их ~30) в зависимости от местонахождения юзера?
Интересует ответ на вопрос, аналогичный комментарию выше, только интересуют не магазины, а учреждения для досуга. Хотелось бы чтобы пользователь мог видеть, какие места для отдыха находятся, например в радиусе 500 метров от его местоположения.
А название города из каких API карт легче выдернуть. чтобы показывать информацию для нужного города?
статья окончательно устарела, жаль, что вторая в выдаче