Este artículo presenta principalmente: Pasos detallados para incrustar mapas de Baidu en páginas web y usar la API de Baidu Maps para personalizar mapas
1. Primero, busque Baidu Map y abra la plataforma abierta del mapa, como se muestra en la Figura 1 a continuación.
Figura 1 Mapa de Baidu --> Plataforma abierta de mapas
2. Seleccione [Desarrollar] en la barra de navegación y seleccione el submenú de navegación correspondiente. Este artículo utiliza el desarrollo web como ejemplo, por lo que se selecciona [ API de JavaScript ] para el desarrollo web.
Figura 2 Seleccionar API de JavaScript
3. Si es la primera vez que lo utilizas, primero debes obtener una clave, esta clave es gratuita.
Figura 3 Obtención de la clave
4. Haga clic para obtener la clave y podrá crear la aplicación, como se muestra en la Figura 4 a continuación.
Figura 4 Creando una aplicación
5. Cree una solicitud, complete el contenido correspondiente y haga clic en Enviar para obtener una clave gratuita.
Figura 5 Complete el contenido y obtenga la clave gratuita
6. Una vez que tenga una clave, puede comenzar a usarla para conectar mapas. Regrese a la página donde acaba de solicitar la clave. Puede hacer clic en cualquiera de los siguientes mapas funcionales para ingresar a la página de edición de mapas.
Figura 6 Opciones de desarrollador de Baidu Map
7. Ingrese a la página de edición como se muestra en la Figura 7.
- La barra de navegación del menú izquierdo tiene una variedad de opciones de funciones. En este ejemplo, se selecciona el ejemplo de mapa --> Visualización del mapa
- La columna del medio es el código de edición.
- La columna de la derecha es el efecto de visualización del mapa.
Puede seleccionar el menú de funciones a la izquierda según las necesidades del proyecto y copiar el código correspondiente, el código debe escribirse en el cuadro rojo en la Figura 7 a continuación, modifíquelo según las necesidades del proyecto.
Figura 7 Página de edición de mapas
8. Para otro ejemplo, al cargar un mapa de forma asincrónica, los lugares que deben modificarse también son los lugares correspondientes a los cuadros rojos.
Figura 8 Carga de mapas asincrónica
9. Este ejemplo utiliza una combinación de visualización de mapas y carga de mapas asincrónica. La referencia del código se muestra en la Figura 9.
Figura 9 Agregar un mapa
10. Representaciones finales
Figura 10 Representaciones finales