A PHP Error was encountered

Severity: 8192

Message: mysql_escape_string(): This function is deprecated; use mysql_real_escape_string() instead.

Filename: mysql/mysql_driver.php

Line Number: 303

Определяем местоположение посетителей используя HTML5 Geolocation API

Определяем местоположение посетителей используя HTML5 Geolocation API

Автор: Mowshon.
Опубликовано 19 сентября 2011
в рубрике PHP, Примеры

Просмотров: 6964.
Подписаться на комментарии по RSS.

Определяем местоположение посетителей используя HTML5 Geolocation API

Геолокация представляет способ определить местоположение и поделиться этой информацией с доверенными сайтами. Это можно сделать несколькими способами, с помощью GPS, встроенного в ваш новый смартфон или подключенного к компьютеру, что является более точным методом. Для пользователей без GPS, браузер будет использовать IP-адрес, или попытается найти ближайшую беспроводную точку доступа, что не так точно, но даст представление о том где они находятся.

Хотя геолокация действительно сложная, вам будет легко реализовать эту функцию. В этой статье я расскажу вам, как определить местоположение пользователя и отобразить на карте с помощью Google Maps.

1 Создание HTML страницы

Начнем с создания простой HTML-страницы, содержащей три тега nodiv. Один для текущего состояния, второй для отображения полученной информации, и третий для отображения местоположения пользователя на карте.

<!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 геолокации, чтобы получить данные о местоположении.

// 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 для загрузки карты.

// 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 слишком короткое, и тайм-аут истек.

// 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.

// 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/

Оставьте комментарий!

Гость
Комментатор / хотите им стать

Чтобы стать комментатором введите email и пароль. Напишите комментарий. В дальшейшем ваша связка email-пароль, позволит вам комментировать и редактировать свои данные. Не забудьте про активацию (инструкция придет на ящик, указанный при регистрации).

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

(обязательно)