Inicio>Tutorial de diseño web>Tutorial HTML

Cómo usar la función de posicionamiento de geolocalización HTML5

Autor：Eve Cole Fecha de actualización：2025-08-20 01:32:02

Usando un código JavaScript relativamente simple, puede crear aplicaciones web que puedan determinar los detalles de la ubicación geográfica del usuario, incluida la latitud y la longitud y la altitud. Algunas aplicaciones web pueden incluso proporcionar funciones de navegación al monitorear el movimiento de las ubicaciones de los usuarios a lo largo del tiempo, lo que también integra sistemas de mapas como la API GooglEMaps.

HTML5 proporciona API de geolocalización para determinar la ubicación del usuario. Podemos usar esta función de HTML5 para desarrollar aplicaciones basadas en la información de geolocalización. Este artículo combina ejemplos para compartir con usted cómo usar HTML5 y usar interfaces de mapas de Baidu y Google para obtener la información de ubicación geográfica precisa de los usuarios.

La geolocalización es una nueva característica de HTML5, por lo que solo es posible ejecutar en navegadores modernos que admiten HTML5, especialmente dispositivos portátiles como iPhones, donde la geolocalización es más precisa. Primero, necesitamos detectar si el navegador del dispositivo de usuario admite la geolocalización y, de ser así, obtener información geográfica. Tenga en cuenta que esta característica puede infringir la privacidad del usuario. A menos que sea el consentimiento del usuario, la información de ubicación del usuario no está disponible, por lo que cuando accedamos a la aplicación, solicitaremos si permitir la geolocalización y, por supuesto, podemos elegir permitir.

  1. functiongetLocation () {
  2. if (navigator.geolocation) {
  3. navigator.geolocation.getCurrentPosition (showposition, ducha);
  4. }demás{
  5. alerta (el navegador no admite la geolocalización);
  6. }
  7. }

El código anterior muestra que si el dispositivo de usuario admite la geolocalización, ejecute el método GetCurrentPosition (). Si GetCurrentPosition () se ejecuta con éxito, un objeto de coordenadas se devuelve a la función especificada en el parámetro ShowPosition. El segundo parámetro del método getCurrentPosition () se usa para manejar el error, que especifica la función que se ejecuta cuando la ubicación del usuario no se puede obtener.

Primero veamos la función showerror (), que especifica el manejo de algunos códigos de error al obtener la ubicación geográfica del usuario:

  1. functionShowerror (error) {
  2. switch (error.code) {
  3. caseError.Permission_Denied:
  4. alerta (la localización falló, el usuario se niega a solicitar la geolocalización);
  5. romper;
  6. CaseError.Position_Unavailable:
  7. alerta (la localización fallida, la información de ubicación no está disponible);
  8. romper;
  9. CaseError.TimeOut:
  10. alerta (localización de fallas, solicitando obtener tiempo de tiempo de ubicación del usuario);
  11. romper;
  12. caseError.unknown_error:
  13. alerta (la localización falló, el sistema de posicionamiento falló);
  14. romper;
  15. }
  16. }

Veamos la función showposition (), y llamemos la latitud y la longitud de las coordinas para obtener la latitud y la longitud del usuario.

  1. functionShowPosition (posición) {
  2. varlat = posicion.coords.latitude; // latitud
  3. varlag = posicion.coords.nongitude; // longitud
  4. alerta ('Lat:'+Lat+', Longitud:'+LAG);
  5. }

Use mapas de Baidu y interfaces de Google Maps para obtener direcciones de usuario

Como entendemos que la geolocalización de HTML5 puede obtener la latitud y la longitud del usuario, lo que debemos hacer es convertir la latitud y la longitud abstractas en información de ubicación geográfica real de usuario real, significativo. Afortunadamente, Baidu Maps y Google Maps proporcionan interfaces a este respecto. Solo necesitamos pasar la información de latitud y longitud obtenida por HTML5 a la interfaz del mapa, y devolverá la ubicación geográfica del usuario, incluida la información provincial, municipal y regional, e incluso información detallada de ubicación geográfica, como calles y números de casas.

Primero definimos el DIV para mostrar la ubicación geográfica en la página y definimos ID#baidu_geo e ID#google_geo respectivamente. Solo necesitamos modificar la función clave showposition (). Primero veamos la interacción de la interfaz del mapa de Baidu. Enviamos la información de latitud y longitud a la interfaz del mapa de Baidu a través de AJAX, y la interfaz devolverá la información provincial, municipal y de la calle correspondiente. La interfaz del mapa de Baidu devuelve una cadena de datos JSON, y podemos mostrar la información requerida a div#baidu_geo de acuerdo con nuestras necesidades. Tenga en cuenta que la biblioteca jQuery se usa aquí, y el archivo de la biblioteca jQuery debe cargarse primero.

  1. functionShowPosition (posición) {
  2. varlatlon = posicion.coords.latitude+','+posicion.coords.longitude;
  4. // Baidu
  5. varurl = http: //api.map.baidu.com/geocoder/v2/? ak = c93b5178d7a8ebdb830b9b557abce78b & llamado = renderReverse & ubicación =+latlon+& output = json & pois = 0;
  6. $ .AJAX ({
  7. Tipo: Obtener,
  8. Tipo de datos: JSONP,
  9. URL: URL,
  10. befeforesend: function () {
  11. $ (#baidu_geo) .html ('localización ...');
  12. },
  13. éxito: function (json) {
  14. if (json.status == 0) {
  15. $ (#baidu_geo) .html (json.result.formatted_address);
  16. }
  17. },
  18. Error: función (xmlhttprequest, textstatus, errorthrown) {
  19. $ (#baidu_geo) .html (la ubicación de la dirección de latlon+falló);
  20. }
  21. });
  22. });

Veamos la interacción de la interfaz de Google Maps. Del mismo modo, enviamos información de latitud y longitud a la interfaz de Google Maps a través de AJAX, y la interfaz devolverá la provincia correspondiente, los detalles de la ciudad y la calle. La interfaz de Google Maps también devuelve una cadena de datos JSON. Estos datos JSON son más detallados que los devueltos por la interfaz Baidu Maps. Podemos mostrar la información requerida para div#Google_Geo de acuerdo con nuestras necesidades.

  1. functionShowPosition (posición) {
  2. varlatlon = posicion.coords.latitude+','+posicion.coords.longitude;
  4. //Google
  5. varurl = 'http: //maps.google.cn/maps/api/geocode/json? latlng ='+latlon+'& language = cn';
  6. $ .AJAX ({
  7. Tipo: Obtener,
  8. URL: URL,
  9. befeforesend: function () {
  10. $ (#google_geo) .html ('localización ...');
  11. },
  12. éxito: function (json) {
  13. if (json.status == 'ok') {
  14. VARRESULTS = JSON.RESULTS;
  15. $ .each (resultados, función (índice, matriz) {
  16. if (index == 0) {
  17. $ (#google_geo) .html (array ['formatted_address']);
  18. }
  19. });
  20. }
  21. },
  22. Error: función (xmlhttprequest, textstatus, errorthrown) {
  23. $ (#Google_Geo) .html (Latlon+Dirección La ubicación fallida);
  24. }
  25. });
  26. }

El código anterior integra la interfaz del mapa de Baidu y la interfaz de mapa de Google en la función showposition () respectivamente, y podemos llamarla de acuerdo con la situación real. Por supuesto, esta es solo una aplicación simple. Podemos desarrollar muchas aplicaciones complejas basadas en este simple ejemplo. Se recomienda utilizar un navegador móvil para acceder a la demostración de demostración.

Artículos relacionados