Более популярный тип обслуживания называется услугами на основе местоположения (LBS). Этот тип услуг является информацией, которую предприятия используют области вблизи координат определенной точки (например, место, где находится пользователь), например, общие службы, связанные с картой. В HTML5 был добавлен новый API геолокации для определения и обмена геолокацией.
Заявление о конфиденциальностиКонфиденциальность является проблемой при обмене физическим местоположением с удаленным веб -сервером. Следовательно, API геолокации требует, чтобы пользователь предоставил разрешения, прежде чем веб -приложение сможет получить доступ к информации о местонахождении. Когда вы впервые получаете доступ к веб -странице, которая запрашивает данные геолокации, в браузере отобразится панель уведомлений, предлагающая вам предоставить доступ к местоположению пользователя. Следуйте подсказкам браузера и выберите соответствующую авторизацию.
Если пользователь не предоставляет разрешения, информация о местоположении не предоставляется веб -приложению. Вызов соответствующего API не вызовет успешный обратный вызов.
Проверьте поддержку браузераAPI Geolocation поддерживается в последней версии основных браузеров, но для того, чтобы быть совместимым со старыми браузерами, вам все равно нужно проверить его. Если API геолокации недоступен, window.navigator.geolocation будет нулевой следующим образом:
function show_islocationenabled ()
{
var str = "Нет, геолокация не поддерживается.";
if (window.navigator.geolocation) {
STR = «Да, геолокация поддерживается.»;
}
предупреждение (str);
}
Geolocation API основан на новом свойстве Global объекта навигации: Navigator.Geolocation, который предоставляет некоторую полезную информацию о браузере и системе посетителя. Информацию о геолокации можно получить во многих средствах: например, базовые станции, веб -базы данных или GPS. Точность информации о геолокации, полученной с использованием различных методов, также отличается. Вообще говоря, наиболее точный из них получается через GPS (большинство GPS используется на мобильных платформах, а платформа ПК в основном опирается на сетевые данные). Случайно, в некоторых местах вы не сможете получить четкие показания географического местоположения или не получать данные.
Установить текущее местоположениеИспользуйте метод навигации getCurrentPosition (), чтобы получить текущее местоположение пользователя. Этот метод получает информацию о местоположении только один раз. Когда метод вызывается сценарием, метод пытается получить текущее местоположение устройства хоста асинхронно.
Подпись метода: getCurrentPosition (GeolocationCcessCessCalkback, [GeolocationEerrorCallback, GeolocationOptions]);
1. GeolocationCcessCessCallback: Получите обратный вызов после успеха текущего местоположения (требуется)
2. GeolocationEerrorCallback. Обратный вызов, используемый при возникновении ошибки (необязательно)
3. Geolocationoptions. Параметры геолокации (необязательно)
Информация о местоположении процесса
После того, как метод getCurrentPositon () успешно получает текущую позицию, он сохранит информацию о позиции в объекте позиции, а затем использует этот объект в качестве параметра для выполнения обратного вызова GeolocationCcesscessCallback. В этой функции обратного вызова вы можете произвольно обрабатывать информацию, содержащуюся в этом объекте.
Объект позиции имеет два свойства: TimeStamp и координации. Атрибут TimeStamp представляет время создания данных геолокации, а атрибут координат представляет информацию о геолокации и содержит семь атрибутов:
.coords.latitude: оценка широты
Полем Координаторы
.coords.altitude: расчетная высота
Полем Координации. Точность: точность оценок долготы и широты, предоставленных в метрах.
.cords.altitudeaccuracy: точность оценки высоты, предоставленные в метрах
Полем Координаты. Заголовок: угловое направление хост -устройства в настоящее время перемещается, рассчитывается по часовой стрелке относительно северного направления
.coords.speed: текущая скорость заземления устройства в метрах в секунду
Как правило, гарантируются три из этих свойств: координат. Это зависит от возможностей устройства и сервера позиционирования бэкэнд, который он использует. Кроме того, свойства заголовка и скорости могут быть рассчитаны на основе предыдущей позиции пользователя.
Обработка ошибокЕсли ошибка возникает при выполнении метода getCurrentPositon (), метод передает объект PositionError в обратный вызов GeolocationEerrorCallback.
Установите параметры геолокацииВы можете установить три свойства GeolocationOptions:
EnableHighaccuracy: если устройство поддерживает высокую точность, эта опция указывает, включена ли высокая точность.
Тайм -аут: тайм -аут запроса
Максимация: максимальное количество раз, когда кеш находится, в котором можно использовать кэш.
См. Полный пример ниже:
<! Doctype html>
<html>
<тело>
<p id = "demo"> нажмите кнопку, чтобы получить свою позицию: </p>
<button onclick = "getLocation ()"> Попробуйте </button>
<div id = "maholder"> </div>
<Скрипт>
var x = document.getElementById ("Демо");
функция getLocation () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition (Showposition, DishRor);
}
еще{
x.innerhtml = "Геолокация не поддерживается этим браузером.";
}
}
функция Showposition (Position) {
var latlon = position.coords.latitude+","+position.coords.longity;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +
latlon + "& Zoom = 9 & size = 400x300 & sensor = false";
document.getElementbyId ("maholder"). innerhtml = "<img src = '"+img_url+"' />";
}
Функция душа (ошибка) {
Switch (error.code) {
case error.permission_denied:
x.innerhtml = «Пользователь отрицал запрос на геолокацию».
перерыв;
case error.position_unavailable:
x.innerhtml = "Информация о местоположении недоступна".
перерыв;
case error.timeout:
x.innerhtml = «Запрос, чтобы вывести местоположение пользователя.
перерыв;
case error.unknown_error:
x.innerhtml = «произошла неизвестная ошибка».
перерыв;
}
}
</script>
</body>
</html>
Этот пример принимает географическое местоположение текущего устройства и отображает его в картах Google. Конечно, вы можете использовать версию статического графика в API Baidu Maps для преобразования этого примера. Для Baidu Map API, пожалуйста, обратитесь к ссылке в практической ссылке позже.
Включить/отменить непрерывное позиционированиеИспользуйте метод навигации WatchPosition (), чтобы регулярно опросить местоположение пользователя, чтобы увидеть, изменилось ли местоположение пользователя. Этот метод имеет три параметра: эти три параметра такие же, как метод getCurrentPosition (), успешный обратный вызов, неудачный обратный вызов и возможность получить информацию о положении; Этот метод имеет возвращаемое значение WatchId, которое используется для отмены непрерывного позиционирования.
Используйте метод навигации ClearWatch (). Geolocation для прекращения продолжающейся WatchPosition (), который принимает только один параметр WatchId.
См. Следующий пример:
<! Doctype html>
<html>
<голова>
<TILE> Пример API Geolocation: прослушивание обновлений местоположения </title>
<meta http-equiv = "x-ua-совместимый" content = "IE = 9" />
<script type = "text/javascript">
функция setText (val, e) {
document.getElementById (e) .value = val;
}
var nav = null;
var watchid;
function alingForpositionUpdates () {
if (Nav == null) {
Nav = window.navigator;
}
if (vav! = null) {
var geoloc = nav.geolocation;
if (geoloc! = null) {
watchid = geoloc.watchposition (SuccessCallback);
}
еще {
оповещение («геолокация не поддерживается»);
}
}
еще {
оповещение («Навигатор не найден»);
}
}
function clearWatch (watchId) {
window.navigator.geolocation.clearwatch (WatchId);
}
Функция успеха callback (позиция)
{
setText (position.coords.latitude, "Latitude");
setText (position.coords.longity, «долгота»);
}
</script>
</head>
<тело>
<метка для = "Latitude"> Latitude: < /label> <input id = "latitude" />
<метка для = "долготы"> долготы: < /label> <input id = "долгота" />
<input type = "button" value = "Смотреть широту и долготу" onclick = "ListenforpotisionUpdates ()" />
<input type = "button" value = "clear Watch" OnClick = "clearWatch ()" />
</body>
</html>
Практическая ссылка:Официальный документ: http://www.w3schools.com/html5/html5_geolocation.asp
Шаблон забот: http://www.cuoxin.com/w3school/html5/
Microsoft Help: http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
Baidu Map API: http://dev.baidu.com/wiki/static/index.htm