Главная страница>Учебник по веб-дизайну>Учебник по HTML

Как использовать функцию позиционирования геолокации HTML5

Автор：Eve Cole Время обновления：2025-08-20 01:32:02

Используя относительно простой код JavaScript, вы можете создавать веб -приложения, которые могут определить детали географического местоположения пользователя, включая широту, долготу и высоту. Некоторые веб -приложения могут даже предоставить навигационные функции, контролируя движение местоположений пользователей с течением времени, что также интегрирует такие системы MAP, как API GoogleMaps.

HTML5 предоставляет API Geolocation API для определения местоположения пользователя. Мы можем использовать эту функцию HTML5 для разработки приложений на основе информации о геолокации. Эта статья объединяет примеры, чтобы поделиться с вами, как использовать HTML5 и использовать интерфейсы Baidu и Google Map, чтобы получить точную информацию о географическом месте пользователей.

Geolocation - это новая особенность HTML5, поэтому можно запустить только в современных браузерах, которые поддерживают HTML5, особенно портативные устройства, такие как iPhone, где геолокация более точная. Во -первых, нам нужно определить, поддерживает ли браузер пользовательского устройства геолокацию, и если да, получить географическую информацию. Обратите внимание, что эта функция может нарушать конфиденциальность пользователя. Если пользователь не является согласием, информация о местоположении пользователя недоступна, поэтому, когда мы получаем доступ к приложению, мы будем привлечь, разрешать ли геолокация, и, конечно, мы можем разрешить разрешить.

  1. functiongetLocation () {
  2. if (navigator.geolocation) {
  3. navigator.geolocation.getCurrentPosition (Showposition, DishRor);
  4. }еще{
  5. оповещение (браузер не поддерживает геолокацию.);
  6. }
  7. }

Приведенный выше код показывает, что если пользовательское устройство поддерживает геолокацию, запустите метод getCurrentPosition (). Если GetCurrentPosition () работает успешно, объект координат возвращается в функцию, указанную в показании параметра. Второй параметр метода getCurrentPosition () используется для обработки ошибки, которая указывает функцию, которая работает, когда местоположение пользователя не может получить.

Давайте сначала посмотрим на функцию DeamlorRor (), который указывает обработку некоторых кодов ошибок при получении географического местоположения пользователя:

  1. functionshowerror (ошибка) {
  2. Switch (error.code) {
  3. caseError.permission_denied:
  4. оповещение (локализация не удалась, пользователь отказывается запрашивать геолокацию);
  5. перерыв;
  6. caseError.position_unavailable:
  7. предупреждение (локализация не удалась, информация о местоположении недоступна);
  8. перерыв;
  9. caseError.timeout:
  10. оповещение (местонахождение сбой, с просьбой получить тайм -аут местоположения пользователя);
  11. перерыв;
  12. caseError.unknown_error:
  13. предупреждение (локализация не удалась, система позиционирования не удалась);
  14. перерыв;
  15. }
  16. }

Давайте посмотрим на функцию Showposition () и назовем широту и долготу координат, чтобы получить широту и долготу пользователя.

  1. functionShowposition (позиция) {
  2. varlat = position.coords.latitude; // широта
  3. varlag = position.coords.longity; // долгота
  4. Alert ('lat:'+lat+', долгота:'+lag);
  5. }

Используйте интерфейсы Baidu Maps и Google Maps для получения адресов пользователя

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

Сначала мы определяем DIV для отображения географического местоположения на странице, и определяем ID#baidu_geo и id#google_geo соответственно. Нам просто нужно изменить ключевую функцию showposition (). Давайте сначала посмотрим на взаимодействие интерфейса карты Baidu. Мы отправляем информацию о широте и долготе в интерфейс карты Baidu через AJAX, и интерфейс вернет соответствующую провинциальную, муниципальную и уличную информацию. Интерфейс карты Baidu возвращает серию данных JSON, и мы можем отобразить необходимую информацию для div#baidu_geo в соответствии с нашими потребностями. Обратите внимание, что здесь используется библиотека jQuery, а файл библиотеки JQUERY должен быть загружен в первую очередь.

  1. functionShowposition (позиция) {
  2. varlatlon = position.coords.latitude+','+position.coords.longitude;
  4. // Байду
  5. varurl = http: //api.map.baidu.com/geocoder/v2/? Ak = c93b5178d7a8ebdb830b9b557abce78b & callback = renderReverse & location =+latlon+& output = json & pois = 0;
  6. $ .ajax ({
  7. Тип: получить,
  8. DataType: jsonp,
  9. URL: URL,
  10. beforesend: function () {
  11. $ (#baidu_geo) .html ('locating ...');
  12. },
  13. Успех: функция (json) {
  14. if (json.status == 0) {
  15. $ (#baidu_geo) .html (json.result.formatted_address);
  16. }
  17. },
  18. Ошибка: function (xmlhttprequest, textStatus, ошибка
  19. $ (#baidu_geo) .html (latlon+местоположение адреса не удалось);
  20. }
  21. });
  22. });

Давайте посмотрим на взаимодействие интерфейса Google Maps. Аналогичным образом, мы отправляем информацию о широте и долготе в интерфейс Google Maps через AJAX, и интерфейс вернет соответствующие детали провинции, города и улицы. Интерфейс Google Maps также возвращает серию данных JSON. Эти данные JSON более подробны, чем данные, возвращаемые интерфейсом Baidu Maps. Мы можем отобразить необходимую информацию для div#Google_geo в соответствии с нашими потребностями.

  1. functionShowposition (позиция) {
  2. varlatlon = position.coords.latitude+','+position.coords.longitude;
  4. //Google
  5. varurl = 'http: //maps.google.cn/maps/api/geocode/json? latlng ='+latlon+'& language = cn';
  6. $ .ajax ({
  7. Тип: получить,
  8. URL: URL,
  9. beforesend: function () {
  10. $ (#Google_geo) .html ('местонахождение ...');
  11. },
  12. Успех: функция (json) {
  13. if (json.status == 'ok') {
  14. varresults = json.results;
  15. $.
  16. if (index == 0) {
  17. $ (#Google_geo) .html (array ['formatted_address']);
  18. }
  19. });
  20. }
  21. },
  22. Ошибка: function (xmlhttprequest, textStatus, ошибка
  23. $ (#Google_geo) .html (latlon+местоположение адреса не удалось);
  24. }
  25. });
  26. }

Приведенный выше код объединяет интерфейс карты Baidu и интерфейс Google Map в функцию ShowPosition () соответственно, и мы можем назвать его в соответствии с фактической ситуацией. Конечно, это просто простое приложение. Мы можем разработать много сложных приложений на основе этого простого примера. Рекомендуется использовать мобильный браузер для доступа к демонстрации демонстрации.

Связанные статьи