Геолокация представляет способ определить местоположение и поделиться этой информацией с доверенными сайтами. Это можно сделать несколькими способами, с помощью GPS, встроенного в ваш новый смартфон или подключенного к компьютеру, что является более точным методом. Для пользователей без GPS, браузер будет использовать IP-адрес, или попытается найти ближайшую беспроводную точку доступа, что не так точно, но даст представление о том где они находятся.
Хотя геолокация действительно сложная, вам будет легко реализовать эту функцию. В этой статье я расскажу вам, как определить местоположение пользователя и отобразить на карте с помощью Google Maps.
1 Создание HTML страницы
Начнем с создания простой HTML-страницы, содержащей три тега nodiv. Один для текущего состояния, второй для отображения полученной информации, и третий для отображения местоположения пользователя на карте.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>HTML5 Geolocation</title> <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> </head> <body onload="initialize()"> <nodiv id="status"></nodiv> <nodiv id="data"></nodiv> <nodiv id="map_canvas" style="width: 640px; height: 480px"></nodiv> </body> </html> |
В страницу также включен Google Maps Api, важно в URL установить параметр sensor=false, иначе Google попытается вычислить местоположение пользователя.
Функция инициализации, которую мы вызовем, попытается вернуть месторасположение при загрузке.
2 Получение местоположения
Пришло время создать функцию инициализации, которая вызовет API геолокации, чтобы получить данные о местоположении.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Initialize geolocation function initialize() { if (navigator.geolocation) { document.getElementById('status').innerHTML = 'Checking...'; navigator.geolocation.getCurrentPosition( onSuccess, onError, { enableHighAccuracy: true, timeout: 20000, maximumAge: 120000 }); } else { document.getElementById('status').innerHTML = 'Geolocation not supported.'; } } |
Сначала проверим, действительно ли браузер поддерживает
геолокацию. Браузеры, которые поддерживают геолокацию: Internet Explorer 9, Firefox 3.5 +, Chrome5 +, Opera 10.6 + и Safari 5 +. Тут вы сможете скачать firefox последнюю версию. Так что она уже довольно широко поддерживается, но если у пользователя старый браузер, мы показываем ему сообщение о том, что геолокация не поддерживается.
Затем мы устанавливаем статус сообщения в "Checking ...", чтобы сообщить пользователю, что мы пытаемся получить данные о местоположении, так как это может занять некоторое время. Потом мы вызываем функцию navigator.geolocation.getCurrentPosition, которая попытается получить расположение пользователя, и в случае успеха вызовет функцию OnSuccess, или OnError в противном случае. В следующие два шага мы создадим эти функции.
В функции getCurrentPosition есть дополнительные параметры. Это enableHighAccuracy, который сообщает браузеру попробовать использовать GPS пользователя, если возможно, false является значением по умолчанию. Параметр timeout сообщает браузеру, как долго мы готовы ждать, чтобы получить местоположение в миллисекундах, значение по умолчанию бесконечно. И наконец параметр maximumAge - это время хранения данных местоположения в кэше в миллисекундах, значением по умолчанию для maximumAge является 0, что полностью отключает кэш.
Поскольку геолокация имеет отношение к конфеденциальности, стандарты W3C требуют, чтобы пользователь согласился поделиться своим местоположением, прежде чем информация будет отправлена на сайт, поэтому, когда мы вызовем getCurrentPosition, для пользователя отобразится информационная панель, где он должен позволить нам получить данные о расположении, если пользователь откажется, то будет вызвана функция OnError.
3 Функция OnSuccess
Далее добавим функцию OnSuccess в наш раздел сценариев. Эта функция отобразит полученные данные, и вызовет loadMap для загрузки карты.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Map position retrieved successfully function onSuccess(position) { var data = ''; data += 'latitude: ' + position.coords.latitude + '<br/>'; data += 'longitude: ' + position.coords.longitude + '<br/>'; data += 'altitude: ' + position.coords.altitude + '<br/>'; data += 'accuracy: ' + position.coords.accuracy + '<br/>'; data += 'altitudeAccuracy: ' + position.coords.altitudeAccuracy + '<br/>'; data += 'heading: ' + position.coords.heading + '<br/>'; data += 'speed: ' + position.coords.speed + '<br/>'; document.getElementById('data').innerHTML = data; loadMap(position.coords.latitude, position.coords.longitude); } |
Эта функция абсолютно понятна, мы создаем строку с полученными данными из переменной position и выводим пользователю. Вы всегда будете получать широту, долготу и значения точности, а остальные параметры не является обязательными и, скорее всего, будут установлены только, если у пользователя есть GPS.
Наконец мы вызываем функцию loadMap и задаем широту и долготу, чтобы показать на карте, где находится пользователь.
4 Функция OnError
Поскольку геолокация является довольно сложной, многое может пойти не так, нам нужен обработчик ошибок. В функции четыре различных кода ошибок, 0 - неопределенная ошибка, ошибка с кодом 1 возникнет если браузер отвергнет получение местоположения, код 2, если браузеру не удается получить местоположение и 3, если значение переменной timeout слишком короткое, и тайм-аут истек.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Error handler function onError(err) { var message; switch (err.code) { case 0: message = 'Unknown error: ' + err.message; break; case 1: message = 'You denied permission to retrieve a position.'; break; case 2: message = 'The browser was unable to determine a position: ' + error.message; break; case 3: message = 'The browser timed out before retrieving the position.'; break; } document.getElementById('status').innerHTML = message; } |
Код этой функции также легко понять. В качестве параметра передается ошибка, и в зависимости от кода ошибки пользователю выдается сообщение.
5 Отображение карты
И наконец мы отображаем карту в блоке map_canvas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Integration with google maps function loadMap(lat, lng) { var latlng = new google.maps.LatLng(lat, lng); var settings = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'), settings); var marker = new google.maps.Marker({ position: latlng, map: map, title: 'Your Position!' }); document.getElementById('status').innerHTML = 'Position Found!'; } |
Если вы хотите узнать больше о Google Maps API, то можете перейти по ссылке.
http://code.google.com/apis/maps/documentation/javascript/