La geolocalización es una API web bajo el estándar HTML5. Puede utilizarla para obtener la información de ubicación actual (coordenadas) del dispositivo. Esta API tiene tres métodos: getCurrentPosition, watchPosition y clearWatch. ¡Los dos métodos restantes requieren usarse juntos!
Cómo utilizar:Comprobación de compatibilidad del navegador:
La API se publica a través del objeto navigator.geolocation. Solo cuando este objeto existe se puede utilizar su servicio de geolocalización. El método de detección es el siguiente.
if (navigator.geolocation) { // El código de posicionamiento está escrito aquí} else { alert('La geolocalización no es compatible con su navegador')}
Obtenga la ubicación actual del usuario:
Utilice el método getCurrentLocation para obtener la información de ubicación del usuario. Este método tiene tres parámetros:
Lista de parámetros | tipo | ilustrar |
manejarÉxito | Función | Llamar a la función handleSuccess en caso de éxito |
manejarError | Función | Llamar a la función handleError en caso de falla |
opciones | Objeto | Parámetros de inicialización |
// Parámetros de inicialización const options = { // Alta precisión: verdadero / falso enableHighAccuracy: verdadero, // Tiempo máximo de espera para la unidad de respuesta: milisegundos, tiempo de espera: 5 * 1000, // La ubicación de caché más larga que la aplicación está dispuesta a aceptar Tiempo MaximumAge: 0}// Función de devolución de llamada exitosa: los datos contienen información de ubicación const handleSuccess = data => console.log(data)// Función de devolución de llamada fallida: el error contiene información de error const handleError = error => console.log(error)if (navigator.geolocation) { // El código de posicionamiento se escribe aquí navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options)} else { alert('La geolocalización no es compatible con su navegador') }
Aquí está el código con más detalles:
const handleSuccess = data => { const { coords, // Marca de tiempo de la información de ubicación // Marca de tiempo cuando la información de ubicación se obtiene exitosamente} = data const { precision, // Precisión del resultado devuelto (metros) altitud, // Relativo a la horizontal plano Altitud altitudeAccuracy, // Devuelve la precisión de la altitud (metros) rumbo, // La dirección de viaje del dispositivo host, en el sentido de las agujas del reloj desde la latitud norte, // Latitud longitud, // Velocidad de longitud // La velocidad de viaje del dispositivo} = coords // Imprímalo y vea console.log('timestamp =', timestamp) console.log('accuracy =', precision) console.log('altitude =', altitude) console .log( 'altitudeAccuracy =', altitudeAccuracy) console.log('rumbo =', rumbo) console.log('latitud =', latitud) console.log('longitud =', longitud) console.log('speed =', speed)}const handleError = error => { switch (error.code) { caso 1: console.log('Solicitud de servicio de ubicación rechazada') break caso 2: console.log(' The la información de ubicación no se puede obtener temporalmente') caso de interrupción 3: console.log('Tiempo de espera para obtener información') caso de interrupción 4: console.log('Error desconocido') break }}const opt = { // Alta precisión: verdadero/falso enableHighAccuracy: verdadero, // Tiempo máximo para esperar una respuesta Unidad: milisegundos tiempo de espera: 5 * 1000, // La antigüedad máxima de la ubicación de caché que la aplicación está dispuesta a aceptar edad máxima: 0} if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handleSuccess , handleError, opt) } else { alert('La geolocalización no es compatible con su navegador')}
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.