HTML5 Guía-4. Utilice la geolocalización para implementar la función de posicionamiento

Autor：Eve Cole Fecha de actualización：2025-04-02 19:00:04

Lo que queremos aprender hoy es usar la geolocalización para implementar funciones de posicionamiento. Podemos obtener el objeto de geolocalización a través de navegación.geolocation, que proporciona los siguientes métodos:

getCurrentPosition (devolución de llamada, error de error, opciones): obtenga la ubicación actual;

WatchPosition (devolución de llamada, error, opciones): comenzar a monitorear la posición actual;

ClearWatch (ID): deje de monitorear la ubicación actual.

Nota: El navegador utilizado en el siguiente ejemplo es Chrome. Usando otros navegadores, no puedo garantizar que los resultados de ejecución sean consistentes con los resultados que se muestran por el ejemplo.

1. Obtenga la ubicación actual

Utilizaremos el método GetCurrentPosition para obtener la posición actual. La información de posición no se devolverá directamente en forma de resultado. Necesitamos usar la función de devolución de llamada para procesarla. Habrá algún retraso en obtener coordenadas, y también le pedirá permisos de acceso. Veamos el siguiente ejemplo:

<! Doctype html>

<html>

<title> Ejemplo </title>

tabla {border-colapso: colapso;}

th, td {relleno: 4px;}

th {text-align: right;}

</style>

</ablo>

<Body>

<Table>

<tr>

<th> Longitud: </th>

<th> Latitud: </th>

</tr>

<tr>

<th> altitud: </th>

<th> precisión: </th>

</tr>

<tr>

<th> precisión de la altitud: </th>

<th> encabezado: </th>

</tr>

<tr>

<th> velocidad: </th>

<th> Sello de tiempo: </th>

</tr>

</table>

navigator.geolocation.getCurrentPosition (displayPosition);

función displayPosition (pos) {

Var Propiedades = ['Longitud', 'latitud', 'altitud', 'altitud', 'precisión', 'altitudeaccuración', 'encabezado', 'velocidad'];

para (var i = 0, len = Properties.length; i <len; i ++) {

value var = pos.coords [propiedades [i]];

document.getElementById (propiedades [i]). innerhtml = valor;

}

document.getElementById ('Timestamp'). Innerhtml = pos.timestamp;

}

</script>

</body>

</html>

El objeto de posición devuelto contiene dos propiedades, Coords: Información de coordenadas de retorno; Marca de tiempo: el tiempo para obtener información de coordenadas. Entre ellos, las coordinas incluyen las siguientes propiedades: Latitud: Latitud; Longitud: longitud; Altitud: altura; precisión: precisión (medidor); Altitudeaccurria: precisión de altura (medidor); Encabezado: dirección de viaje; Velocidad: Velocidad de viaje (medidor/segundo).

No se devolverá toda la información, depende del dispositivo que aloje el navegador. Los dispositivos móviles como GPS, aceleradores y Compass devolverán la mayor parte de la información, pero las computadoras domésticas no funcionarán. La información de ubicación obtenida por una computadora doméstica depende del entorno de red o WiFi. Veamos los resultados de ejecución del ejemplo anterior.

Haga clic en Permitir obtener información de coordenadas.

2. Manejar excepciones

Ahora presentamos el manejo de excepciones de GetCurrentPosition, que se implementa utilizando la función de devolución de llamada ErrorCallback. El error del parámetro devuelto por la función contiene dos propiedades, código: código del tipo de error; Mensaje: Mensaje de error. El código contiene tres valores: 1: El usuario no está autorizado a usar Geolocation; 2: No se puede obtener la información de coordenadas; 3: Se obtiene el tiempo de espera de la información.

Veamos un ejemplo a continuación:

<! Doctype html>

<html>

<title> Ejemplo </title>

tabla {border-colapso: colapso;}

th, td {relleno: 4px;}

th {text-align: right;}

</style>

</ablo>

<Body>

<Table>

<tr>

<th> Longitud: </th>

<th> Latitud: </th>

</tr>

<tr>

<th> altitud: </th>

<th> precisión: </th>

</tr>

<tr>

<th> precisión de la altitud: </th>

<th> encabezado: </th>

</tr>

<tr>

<th> velocidad: </th>

<th> Sello de tiempo: </th>

</tr>

<tr>

<th> Código de error: </th>

<th> Mensaje de error: </th>

</tr>

</table>

navigator.geolocation.getCurrentPosition (displayPosition, maneRerror);

función displayPosition (pos) {

VAR Propiedades = ["Longitud", "latitud", "altitud", "precisión", "altitudeaccuración", "encabezado", "velocidad"];

para (var i = 0; i <propietarios.length; i ++) {

value var = pos.coords [propiedades [i]];

document.getElementById (propiedades [i]). innerhtml = valor;

}

document.getElementById ("Timestamp"). Innerhtml = pos.timestamp;

}

función handleError (err) {

document.getElementById ("errcode"). innerhtml = err.code;

document.getElementById ("errmessage"). innerhtml = err.message;

}

</script>

</body>

</html>

Se rechaza la autorización, resultado de la operación:

3. Use elementos de parámetros opcionales de geolocalización

Las opciones en GetCurrentPosition (devolución de llamada, ErrorCallback, Opciones) tienen los siguientes parámetros para usar, HabilitarHIGHACCURACIÓN: Use el mejor efecto; Tiempo de espera: Tiempo de espera (milisegundos); Máxima: especifique el tiempo de caché (milisegundos). Echemos un vistazo al siguiente ejemplo:

<! Doctype html>

<html>

<title> Ejemplo </title>

tabla {border-colapso: colapso;}

th, td {relleno: 4px;}

th {text-align: right;}

</style>

</ablo>

<Body>

<Table>

<tr>

<th> Longitud: </th>

<th> Latitud: </th>

</tr>

<tr>

<th> altitud: </th>

<th> precisión: </th>

</tr>

<tr>

<th> precisión de la altitud: </th>

<th> encabezado: </th>

</tr>

<tr>

<th> velocidad: </th>

<th> Sello de tiempo: </th>

</tr>

<tr>

<th> Código de error: </th>

<th> Mensaje de error: </th>

</tr>

</table>

opciones var = {

EnableHighCuracy: False,

Tiempo de espera: 2000,

máxima: 30000

};

navigator.geolocation.getCurrentPosition (displayPosition, handleError, opciones);

función displayPosition (pos) {

VAR Propiedades = ["Longitud", "latitud", "altitud", "precisión", "altitudeaccuración", "encabezado", "velocidad"];

para (var i = 0; i <propietarios.length; i ++) {

value var = pos.coords [propiedades [i]];

document.getElementById (propiedades [i]). innerhtml = valor;

}

document.getElementById ("Timestamp"). Innerhtml = pos.timestamp;

}

función handleError (err) {

document.getElementById ("errcode"). innerhtml = err.code;

document.getElementById ("errmessage"). innerhtml = err.message;

}

</script>

</body>

</html>

4. Monitor de cambios de ubicación

A continuación presentamos el uso del método Watchposition para implementar cambios de posición. Su método de uso es el mismo que GetCurrentPosition. Veamos el ejemplo:

<! Doctype html>

<html>

<title> Ejemplo </title>

tabla {border-colapso: colapso;}

th, td {relleno: 4px;}

th {text-align: right;}

</style>

</ablo>

<Body>

<Table>

<tr>

<th> Longitud: </th>

<th> Latitud: </th>

</tr>

<tr>

<th> altitud: </th>

<th> precisión: </th>

</tr>

<tr>

<th> precisión de la altitud: </th>

<th> encabezado: </th>

</tr>

<tr>

<th> velocidad: </th>

<th> Sello de tiempo: </th>

</tr>

<tr>

<th> Código de error: </th>

<th> Mensaje de error: </th>

</tr>

</table>

<botón id = "pressme"> Cancelar watch </boton>

opciones var = {

EnableHighCuracy: False,

Tiempo de espera: 2000,

máxima: 30000

};

var watchId = navigator.geolocation.watchPosition (displayPosition, handleError, opciones);

document.getElementById ("PressMe"). onClick = function (e) {

navigator.geolocation.clearWatch (WatchID);

};

función displayPosition (pos) {

VAR Propiedades = ["Longitud", "latitud", "altitud", "precisión", "altitudeaccuración", "encabezado", "velocidad"];

para (var i = 0; i <propietarios.length; i ++) {

value var = pos.coords [propiedades [i]];

document.getElementById (propiedades [i]). innerhtml = valor;

}

document.getElementById ("Timestamp"). Innerhtml = pos.timestamp;

}

función handleError (err) {

document.getElementById ("errcode"). innerhtml = err.code;

document.getElementById ("errmessage"). innerhtml = err.message;

}

</script>

</body>

</html>

Cuando se hace clic en el botón Cancelar reloj, se detiene el monitoreo.

Dirección de descarga de demostración: html5guide.geolocation.zip