Un tipo de servicio más popular se llama servicio basado en la ubicación (LBS). Este tipo de servicio es la información de que las empresas usan áreas cerca de las coordenadas de cierto punto (como la ubicación donde se encuentra el usuario), como los servicios comunes relacionados con el mapa. En HTML5, se agregó una nueva API de geolocalización para determinar y compartir la geolocalización.
Declaración de privacidadLa privacidad es una preocupación al compartir una ubicación física con un servidor web remoto. Por lo tanto, la API de geolocalización requiere que el usuario proporcione permisos antes de que la aplicación web pueda acceder a la información de ubicación. Cuando accede por primera vez a una página web que solicita datos de geolocalización, el navegador mostrará una barra de notificaciones que le pedirá que proporcione acceso a la ubicación del usuario. Siga las indicaciones del navegador y seleccione la autorización relevante.
Si el usuario no otorga permisos, la información de ubicación no se proporciona a la aplicación web. Llamar a la API relevante no activará una devolución de llamada exitosa.
Verifique el soporte del navegadorLa API de geolocalización es compatible con la última versión de los navegadores convencionales, pero para ser compatible con los navegadores antiguos, aún necesita verificarlo. Si la API de Geolocation no está disponible, Window.navigator.Geolocation será nula de la siguiente manera:
función show_islocationEnabled ()
{
var str = "No, la geolocalización no es compatible";
if (window.navigator.geolocation) {
str = "Sí, la geolocalización es compatible";
}
alerta (str);
}
La API de geolocalización se basa en una nueva propiedad del objeto global de navegación: navigator.geolocation, que proporciona información útil sobre el navegador y el sistema del visitante. La información de geolocalización se puede obtener a través de muchos medios: como estaciones base, bases de datos web o GPS. La precisión de la información de geolocalización obtenida utilizando diferentes métodos también es diferente. En términos generales, el más preciso se obtiene a través del GPS (la mayoría de los GP se usan en plataformas móviles, y la plataforma PC básicamente depende de los datos de la red). Por casualidad, en algunos lugares, es posible que no pueda obtener lecturas claras de ubicación geográfica o no recibir datos.
Cosicione la ubicación actualUse el método GetCurrentPosition () de navegación. Geolocation para obtener la ubicación actual del usuario. Este método solo obtiene la información de ubicación una vez. Cuando el script llama al método, el método intenta obtener la ubicación actual del dispositivo host de manera asincrónica.
Firma del método: getCurrentPosition (geolocationsuccesscallback, [geolocationErrorcallback, geolocationOptions]);
1. GeolocationsUccessCallback: Obtenga la devolución de llamada después de que la ubicación actual sea exitosa (requerida)
2. GeolocationErrorcallback. Devolución de llamada utilizada cuando ocurre un error (opcional)
3. GeolocationOptions. Opciones de geolocalización (opcional)
Información de ubicación del proceso
Después de que el método GetCurrentPositon () obtiene con éxito la posición actual, guardará la información de posición en un objeto de posición y luego usará este objeto como parámetro para ejecutar la devolución de llamada de GeolocationsUccessCallback. En esta función de devolución de llamada, puede manejar arbitrariamente la información contenida en este objeto.
El objeto de posición tiene dos propiedades: marca de tiempo y coordinas. El atributo de marca de tiempo representa el tiempo de creación de los datos de geolocalización, y el atributo Coords representa la información de geolocalización y contiene siete atributos:
.coords.latitud: estimar la latitud
. Coords. Longitud: estimar la longitud
.Coords. Altitud: Altura estimada
. Coordes. Atrescre: la precisión de las estimaciones de longitud y latitud proporcionadas en metros
.Coords.Altitudeaccurria: la precisión de las estimaciones de altura proporcionadas en los medidores
. coordenadas. Cabeza: la dirección angular del dispositivo host actualmente en movimiento, calculado en sentido horario en relación con la dirección norte
.Coords.speed: la velocidad de tierra actual del dispositivo en metros por segundo
En general, se garantizan tres de estas propiedades: coordinas. Latitud, Coords. Longitud y Coords. Atrescencia y el resto de retorno NULL; Esto depende de las capacidades del dispositivo y del servidor de posicionamiento de backend que utiliza. Además, las propiedades de encabezado y velocidad se pueden calcular en función de la posición anterior del usuario.
Errores de manejoSi se produce un error al ejecutar el método getCurrentPositon (), el método pasa un objeto PositionError a la devolución de llamada GeolocationErrorcallback.
Establecer opciones de geolocalizaciónPuede establecer tres propiedades de GeolocationOptions:
EnableHighCuracy: si el dispositivo admite una alta precisión, esta opción indica si se habilita la alta precisión.
Tiempo de espera: Tiempo de espera de la consulta
Máxima: el número máximo de veces se encuentra el caché, durante el cual se puede usar el caché.
Vea el ejemplo completo a continuación:
<! Doctype html>
<html>
<Body>
<p id = "demo"> Haga clic en el botón para obtener su posición: </p>
<Button onClick = "getLocation ()"> pruébalo </botón>
<div id = "maholder"> </div>
<script>
var x = document.getElementById ("demo");
función getLocation () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition (showposition, ducha);
}
demás{
x.innerhtml = "Geolocation no es compatible con este navegador";
}
}
función showposition (posición) {
var latlon = posicion.coords.latitude+","+posicion.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +
latlon + "& zoom = 9 & size = 400x300 & sensor = false";
document.getElementById ("maholder"). innerhtml = "<img src = '"+img_url+"' />";
}
function showror (error) {
switch (error.code) {
Error de caso.Permission_Denied:
x.innerhtml = "Usuario denegó la solicitud de geolocalización".
romper;
Error de caso.Position_Unavailable:
x.innerhtml = "La información de ubicación no está disponible".
romper;
Error de caso. TIMEOUT:
x.innerhtml = "La solicitud para hacer que la ubicación del usuario se agote fuera".
romper;
Error de caso.unknown_error:
x.innerhtml = "Ocurrió un error desconocido".
romper;
}
}
</script>
</body>
</html>
Este ejemplo toma la ubicación geográfica del dispositivo actual y la muestra en Google Maps. Por supuesto, puede usar la versión del gráfico estático en la API de Baidu Maps para transformar este ejemplo. Para la API del mapa de Baidu, consulte el enlace en la referencia práctica más adelante.
Encender/cancelar el posicionamiento continuoUtilice el método WatchPosition () de navegación. Geolocation para sondear la ubicación del usuario regularmente para ver si la ubicación del usuario ha cambiado. Este método tiene tres parámetros: estos tres parámetros son los mismos que el método GetCurrentPosition (), una devolución de llamada exitosa, una devolución de llamada fallida y una opción para obtener información de posición; Este método tiene un valor de retorno WatchID, que se utiliza para cancelar el posicionamiento continuo.
Use el método ClearWatch () de navegación. Geolocation para finalizar el WatchPosition en curso (), que solo toma un parámetro WatchID.
Vea el siguiente ejemplo:
<! Doctype html>
<html>
<Evista>
<title> Ejemplo de la API de geolocalización: escuchar actualizaciones de ubicación </title>
<meta http-oquiv = "x-ua-compatible" content = "ie = 9" />
<script type = "text/javaScript">
función setText (val, e) {
document.getElementById (e) .Value = val;
}
var nav = null;
var watchid;
function LearchForPositionUpdates () {
if (nav == null) {
Nav = Window.navigator;
}
if (nav! = null) {
var geoloc = Nav.Geolocation;
if (geoloc! = null) {
watchId = geoloc.watchPosition (SuccessCallback);
}
demás {
alerta ("geolocalización no compatible");
}
}
demás {
alerta ("Navigator no encontrado");
}
}
función ClearWatch (WatchID) {
Window.navigator.Geolocation.ClearWatch (WatchId);
}
Función SuccessCallback (posición)
{
setText (posicion.coords.latitude, "latitud");
setText (posicion.coords.nongitude, "longitud");
}
</script>
</ablo>
<Body>
<etiqueta para = "latitud"> latitud: </label> <input id = "latitud" />
<etiqueta for = "longitud"> longitud: </label> <input id = "longitud" />
<input type = "button" value = "Watch Latitude and Longitude" onClick = "LearchForPositionUpdates ()" />
<input type = "button" value = "claro watch" onClick = "clearWatch ()" />
</body>
</html>
Referencia práctica:Documento oficial: http://www.w3schools.com/html5/html5_geolocation.asp
Preocupaciones de la plantilla: http://www.cuoxin.com/w3school/html5/
Ayuda de Microsoft: http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
API del mapa de Baidu: http://dev.baidu.com/wiki/static/index.htm