Використовуємо html5 geolocation api - цікава веб-картографія

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

Для цього користувач повинен дозволити можливість визначення свого розташування.

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

У цій замітці я розповім як використовувати цю можливість з різними API карт.

Перше, Ви повинні перевірити підтримує чи ні HTML5 Geolocation API браузер користувача.

Це можна зробити за допомогою коду:

Визначити місце розташування користувача можна, використовуючи наступний код:

З'єднаємо два приклади коду в один, отримаємо найпростіший приклад визначення положення користувача:

Використовуємо html5 geolocation api - цікава веб-картографія

Потрібно дозволити повідомити місце розташування.

Тоді ми побачимо вікно з координатами

Використовуємо html5 geolocation api - цікава веб-картографія

Інформатівней, якщо місце розташування буде відразу показано на карті.

Розглянемо як це можна зробити, використовуючи різні API карт (Google, Bing. Nokia Maps, Яндекс.Карти і OpenStreetMap).

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

Використовуємо html5 geolocation api - цікава веб-картографія

2. Приклад з використанням API Google Maps

Використовуємо html5 geolocation api - цікава веб-картографія

3. Приклад з використанням API Bing Maps

Використовуємо html5 geolocation api - цікава веб-картографія

4. Приклад з використанням API Nokia Maps

Використовуємо html5 geolocation api - цікава веб-картографія

5. Приклад з використанням OpenStreetMap і бібліотеки Leaflet

Використовуємо html5 geolocation api - цікава веб-картографія

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

Використовуємо html5 geolocation api - цікава веб-картографія

Навігація по публікаціям

А як за допомогою даної функції реалізувати пошук найближчого магазину (всього їх

30) в залежності від місцезнаходження користувача?

А назва міста з яких API карт легше висмикнути. щоб показувати інформацію для потрібного міста?

Схожі статті