Статьи

HTML5 геолокация

Январь 21, 2019

API геолокации HTML5 помогает идентифицировать местоположение пользователя, что может быть использовано для предоставления пользователю информации о местоположении или маршрутизации.

Есть много методов, используемых для определения местоположения пользователя. В настольном браузере обычно используются методы позиционирования на основе WIFI или IP, тогда как мобильный браузер использует методы триангуляции соты, GPS, A-GPS, на основе WIFI и т. Д. В API геолокации будет использоваться любой из этих методов для определения местоположения пользователя.

Geolocation API защищает конфиденциальность пользователя, предписывая запрашивать и получать разрешение пользователя перед отправкой информации о местоположении пользователя на любой веб-сайт. Таким образом, пользователю будет предложено всплывающее окно или диалоговое окно, запрашивающее разрешение пользователя поделиться информацией о местоположении. Пользователь может принять или отклонить запрос.

требуется разрешение пользователя

Теперь давайте сначала разберемся с API, а затем нанесем ваше местоположение на Google Maps.

Первым шагом в использовании любого из API в HTML5 является проверка его совместимости с браузером.

Проверьте совместимость браузера

Свойство геолокации объекта глобального навигатора помогает обнаружить поддержку браузером API геолокации. 

if (navigator.geolocation) { // Get the user's current position } else { alert('Geolocation is not supported in your browser'); }

Получить текущее местоположение пользователя

Текущее местоположение пользователя можно получить с getCurrentPosition функции getCurrentPosition объекта navigator.geolocation . Эта функция принимает три параметра — функцию обратного вызова « Успех», функцию обратного вызова « Ошибка» и параметры положения . Если данные о местоположении извлекаются успешно, функция обратного вызова success будет вызываться с полученным объектом position качестве входного параметра. В противном случае функция обратного вызова ошибки будет вызываться с объектом error качестве входного параметра. 

 if (navigator.geolocation) { // Get the user's current position navigator.geolocation.getCurrentPosition(showPosition, showError, optn); } else { alert('Geolocation is not supported in your browser'); }
  1. Функция обратного вызова
    Эта функция обратного вызова вызывается только тогда, когда пользователь соглашается поделиться информацией о местоположении и данные о местоположении успешно выбираются браузером. Данные о местоположении будут доступны как объект положения, и функция будет вызываться с объектом положения в качестве входного параметра. Объект позиции содержит свойство timestamp обозначающее время, в которое данные о местоположении извлекаются, и объект coords .

    Объект coords имеет следующие свойства

    • Широта, долгота — географические координаты в десятичных градусах
    • Точность — уровень точности координат широты и долготы в метрах. Чем больше число, тем меньше точность
    • Высота над уровнем моря — высота позиции над уровнем моря в метрах
    • Точность высоты — обозначает, насколько далеко от высоты может быть положение относительно фактического значения положения, полученного в метрах. Чем больше число, тем меньше точность
    • Направление — обеспечивает информацию о направлении на 360 градусов
    • Скорость — указывает относительную скорость в метрах в секунду 
     function showPosition(position) { document.write('Latitude: '+position.coords.latitude+'Longitude: '+position.coords.longitude); }
  2. Функция обратного вызова ошибки
    Это дополнительная функция обратного вызова, которая принимает объект «Ошибка позиции» в качестве входного параметра. Эта функция вызывается при любом из следующих обстоятельств

    • Произошла неизвестная ошибка
    • Истекло время запроса
    • Пользователь отказался предоставить информацию о местоположении
    • Сама информация о местоположении недоступна 
     function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: alert("User denied the request for Geolocation."); break; case error.POSITION_UNAVAILABLE: alert("Location information is unavailable."); break; case error.TIMEOUT: alert("The request to get user location timed out."); break; case error.UNKNOWN_ERROR: alert("An unknown error occurred."); break; } }
  3. Параметры позиции

    В нем описываются параметры, используемые при получении местоположения пользователя.

    • enableHighAccuracy: Boolean. Если это правда, пользовательский агент попытается предоставить наиболее точную позицию. Это может привести к снижению времени отклика и увеличению энергопотребления. Ложь, менее точная позиция будет получена. Значением по умолчанию является false.
    • Тайм-аут: положительное длинное значение. Он обозначает максимальное время (в миллисекундах), которое может выполнить пользовательский агент, чтобы ответить данными о местоположении. Значением по умолчанию является Бесконечность.
    • MaximumAge: положительное длинное значение. Он обозначает, как долго (в миллисекундах) пользовательский агент может продолжать использовать кэшированные данные о местоположении, прежде чем пытаться получить новые данные о местоположении. Нулевое значение указывает, что пользовательский агент не должен использовать кэшированные данные о местоположении, а бесконечное значение указывает, что кэшированные данные о местоположении должны использоваться пользовательским агентом. 
     if (navigator.geolocation) { var optn = { enableHighAccuracy : true, timeout : Infinity, maximumAge : 0 }; navigator.geolocation.getCurrentPosition(showPosition, showError, optn); } else { alert('Geolocation is not supported in your browser'); }

Отслеживание изменений местоположения

Функция watchPosition() может использоваться для получения данных о местоположении через равные промежутки времени. Функция обратного вызова успешно вызывается автоматически по мере изменения положения устройства или агента. Параметры этой функции аналогичны функции getCurrentPosition() . Он возвращает значение watch ID которое можно использовать для отмены регистрации функции обратного вызова, передав ее в clearWatch() . 

 function startWatch(){ if (navigator.geolocation) { var optn = { enableHighAccuracy : true, timeout : Infinity, maximumAge : 0 }; watchId = navigator.geolocation.watchPosition(showPosition, showError, optn); } else { alert('Geolocation is not supported in your browser'); } } function stopWatch() { . if (watchId) { navigator.geolocation.clearWatch(watchId); watchId = null; } }

Показать мое местоположение на Google Maps

Чтобы отобразить ваше местоположение на Google Картах, мы можем использовать API Карт Google вместе с API Geolocation.

  1. Прежде всего, мы должны преобразовать координаты широты и долготы объекта позиции, полученного с помощью API геолокации, в объект latLng карт Google. 
     var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  2. Создайте объект Map, указав параметры отображения карты и контейнер HTML, в котором должна отображаться карта. В приведенном ниже примере указаны три варианта отображения карты
    • Zoom — Определяет уровень масштабирования
    • Центр — указывает, что карта должна быть центрирована в местоположении пользователя
    • mapTypeId — может быть дорожной картой, спутниковой или гибридной 
     var mapOptions = { zoom : 12, center : googlePos, mapTypeId : google.maps.MapTypeId.ROADMAP }; var mapObj = document.getElementById('mapTxt'); var googleMap = new google.maps.Map(mapObj, mapOptions);
  3. Создайте маркер в месте, указанном ниже 
     var markerOpt = { map : googleMap, position : googlePos, title : 'Hi , I am here', animation : google.maps.Animation.DROP }; var googleMarker = new google.maps.Marker(markerOpt);

    В приведенном выше коде опции маркера указывают на следующее

    • Карта — объект карты, где должен появиться маркер
    • Position — последняя позиция, в которой должен отображаться маркер
    • Заголовок — заголовок, который должен появиться при наведении курсора на маркер.
  4. Найдите адрес вашего местоположения с помощью API обратного геокодирования и покажите адрес, полученный при нажатии на маркер. 
     var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'latLng' : googlePos }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { var popOpts = { content : results[1].formatted_address, position : googlePos }; var popup = new google.maps.InfoWindow(popOpts); google.maps.event.addListener(googleMarker, 'click', function() { popup.open(googleMap); }); } else { alert('No results found'); } } else { alert('Geocoder failed due to: ' + status); } });

    5. Образец кода 

     <!DOCTYPE html> <html> <head> <title>Sample Map</title> <style> #mapdiv { margin: 0; padding: 0; width: 500px; height: 500px; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> <script> var watchId = null; function geoloc() { if (navigator.geolocation) { var optn = { enableHighAccuracy : true, timeout : Infinity, maximumAge : 0 }; watchId = navigator.geolocation.watchPosition(showPosition, showError, optn); } else { alert('Geolocation is not supported in your browser'); } } function showPosition(position) { var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var mapOptions = { zoom : 12, center : googlePos, mapTypeId : google.maps.MapTypeId.ROADMAP }; var mapObj = document.getElementById('mapdiv'); var googleMap = new google.maps.Map(mapObj, mapOptions); var markerOpt = { map : googleMap, position : googlePos, title : 'Hi , I am here', animation : google.maps.Animation.DROP }; var googleMarker = new google.maps.Marker(markerOpt); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'latLng' : googlePos }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { var popOpts = { content : results[1].formatted_address, position : googlePos }; var popup = new google.maps.InfoWindow(popOpts); google.maps.event.addListener(googleMarker, 'click', function() { popup.open(googleMap); }); } else { alert('No results found'); } } else { alert('Geocoder failed due to: ' + status); } }); } function stopWatch() { if (watchId) { navigator.geolocation.clearWatch(watchId); watchId = null; } } function showError(error) { var err = document.getElementById('mapdiv'); switch(error.code) { case error.PERMISSION_DENIED: err.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: err.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: err.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: err.innerHTML = "An unknown error occurred." break; } } </script> </head> <body onload="geoloc()"> <p id = 'mapdiv'></p> <button onclick="stopWatch()"> Stop </button> </body> </html>

    Google Map

    Вывод

    Начните изучать API карт Google и посмотрите, какие дополнительные функции вы можете создать на основе приведенного выше примера.

32
Share: