La aplicación del posicionamiento geográfico HTML5 y el mapa de la tercera herramienta de la parte del partido.

Vi muchos Daniel técnico y blogs relacionados, y rara vez describí el posicionamiento geográfico de HTML5.

Primero, la razón para los proveedores de servicios, debido a que Google proporciona el posicionamiento de HTML5, porque Google ha bloqueado el continente, la función de posicionamiento no es compatible.

En segundo lugar, el posicionamiento geográfico viene con HTML5 tiene un bajo rendimiento.

Dado que el posicionamiento geográfico es una nueva característica de HTML5, también necesitamos aprender y dominar las API relacionadas y aprender a usar el posicionamiento geográfico

Primero entender el sentido común

Una nueva geología sustantiva:

Se utiliza para obtener las coordenadas geográficas donde se encuentra el navegador actual, para proporcionar a LBS (servicios basados ​​en la ubicación). datos:

Meridez: longitud

Latitud: latitud

Altitud: altitud

Velocidad: velocidad

Use la plataforma para dividirse en el final móvil y de PC:

(1) navegador móvil:

Primero intente usar la precisión de datos GPS incorporada se basa en el arroz

Luego use el número de la estación base móvil para revertir la precisión de posicionamiento de ubicación geográfica correspondiente está en la unidad

(2) navegador de PC:

Consulta inversa a través de la dirección IP de la computadora

Tema:

En primer lugar, presionamos F12 para abrir la consola en el navegador e ingresar a la ventana.

Vemos que hay tres métodos principales en la información de posicionamiento, y el significado es:

 GetCurrentPosition: FN (Succ, ERR) // Obtenga los datos de posicionamiento actuales, que contiene la posición de reloj, que es exitosa y no puede obtener y falla.

Desde entonces, sabemos cómo usar el posicionamiento geográfico en el archivo HTML5.

 <! {// Haga clic en el botón para activar navegator.geolocation.getCurrentPosition (SuccCB, errcb); Intersección console.log ('Obtención exitosa de los datos de posicionamiento'); '+Pos.coords.altitude); Intersección Console.log ('Obtenga los datos de posicionamiento fallidos'); }} </script> </body> </html>

Como se muestra en la figura, cuando el botón de clic, los datos de posicionamiento se obtienen con éxito, pero la altura y la velocidad son nulas debido al lado de la PC, por lo que solo necesitamos recordar un método para obtener una posición geográfica en HTML5.

 Navigator.geolocation.getCurrentPosotion (function (pos) {console.log ('' adquisición de datos de ubicación exitosa '); // pos.coords.longtitude ....} (err) {console.log (' 'Posicionamiento de adquisición de datos fallido '); //crod. Message})

Como mencioné en el prólogo, el uso de mapas de Baidu en el proyecto y muchas aplicaciones móviles proporciona a los usuarios para seleccionar la información de posicionamiento.

En primer lugar, tenemos que saber que el código fuente del mapa de Baidu no se descargará a todos. una empresa muy conciencia.

Use pasos:

Primero abra el sitio web oficial http://lbsyun.baidu.com/, y luego tírelo al fondo:

Se puede ver que el mapa de Baidu se puede utilizar para el desarrollo web, el desarrollo de Android, el desarrollo de iOS.

URL: http://lbsyun.baidu.com/index.php?

Podemos ir a muchos casos y a la pantalla de funciones en la API.

Explicaré cuál es la clave más tarde. Ingrese el teléfono móvil relacionado, el buzón y luego verifique en el buzón.

Complete el nombre de la solicitud a voluntad

Selección de tipo de aplicación --- navegador Nide

Lista de referentes: se refiere a quién puede acceder a su aplicación, cómo puede acceder a su solicitud en cómo acceder a ella y completar un número de estrella ' *' aquí, lo que significa que todas las personas pueden acceder a ella, porque solo se pueden realizar pruebas, Y el proyecto se puede hacer en el futuro. Intersección ¡Luego haga clic en Enviar para completar la creación! Intersección

Después de la creación de la aplicación, aparece la siguiente interfaz:

Aquí mostrará el número de aplicación, el nombre de la aplicación y el código de aplicación de acceso más importante creado aquí, ¡que es la clave mencionada anteriormente!

Después de obtener la clave, volvemos a la página de inicio http://lbsyun.baidu.com/index.php?title=jspopular

Haga clic en la Guía de desarrollo de la izquierda, ¡puede ver el uso de API y casos relacionados! Intersección Esta API es la mayor conciencia en la API, no hay tonterías,

La escritura es muy detallada y fácil de entender, porque hay demasiados, ¡solo presente algunos usos principales aquí! Intersección Intersección

Creamos un nuevo archivo HTML y copiamos el código anterior al archivo HTML

 <! = JRBP IU6JCBPSXGVDQAC0C. Versión anterior y método de referencia de versión anterior: src = http://api.map.baidu.com/api? ; altura: 500 PX; Mapa de la instancia para evitar el peso pesado con el nombre del mapa, así que use BMAP.MAP VAR MAP = nuevo BMAP.MAP (contenedor); Coordenadas de puntos centrales y niveles de mapa 1 ~ ~ MAP. Centerandzoom (punto, 18); ); cuerpo> </html>

Use el mapa de Baidu:

Ok, usamos con éxito los mapas de Baidu en el archivo HTML. Intersección

Descripción de la función relacionada:

 <script src = http://api.map.baidu.com/api?

¡Ingrese la llave del tronco largo en AK para citar el mapa de Baidu! Intersección

Crear una instancia de mapa-husta se selecciona.

var map = new BMAP.MAP (contenedor);

¡Crea un punto específico, información de latitud y longitud! Intersección Si no lo sabe, puede usar el anterior

Navigator.Geology.getCurrentPosotion Método para obtener latitud y longitud-husta se debe seleccionar.

punto var = nuevo BMAP.Point (116.300982,39.915907);

Mostrar números de mapa en el punto centrado como el centro, 17 se refiere al nivel, y el nivel se puede dividir en el nivel 1 a 18. Cuanto menor sea el nivel del nivel, mayor es el rango del mapa y cuanto mayor sea el nivel del nivel. Intersección --- Debe elegir.

map.centerandzoom (punto, 17);

El mapa se puede seleccionar con la opción del mouse.

MAP.ENABLECROLLWHHEELZOOM (verdadero);

El mapa muestra el control: el efecto se prueba por sí mismo.

 MAP.AddControl (nuevo BMAP.NavigationControl ());

Mostrar una etiqueta en el mapa (etiqueta) -optional

var marcador = map.addoverlay (nuevo BMAP.Marker (Point));

Ok, el mapa de la tercera parte de Baidu se dice aquí, hay muchas funciones divertidas que pueden ser utilizadas por ellos mismos, por lo que los métodos y parámetros se pueden encontrar en la API.

Lo anterior es todo el contenido de este artículo.