¿Cómo llamar a una API de terceros en la página web front-end para mostrar información en la página web?

Aquí tomamos la llamada a Amap y Baidu Map como ejemplo para presentar brevemente cómo llamar a la API de mapas de terceros en la página web de front-end. Los contenidos principales son los siguientes:

Llamar a la API de Amap

1. Primero, debe registrarse como desarrollador de Amap. Este es un requisito previo para usar la API únicamente iniciando sesión normalmente, creando una aplicación y generando una. Valor clave exclusivo: puede llamar al mapa normalmente. Si desea registrarse, vaya directamente al sitio web oficial para registrarse. Eso es todo. Debe ingresar la siguiente información y seguir las instrucciones paso a paso:

2. Después de registrarse exitosamente, inicie sesión en la plataforma, haga clic en "Consola" en la esquina superior derecha para ingresar a la interfaz de administración de usuarios y haga clic en "Administración de aplicaciones" -> "Mi aplicación" saltará a la interfaz de administración de aplicaciones. , haga clic en "Crear aplicación" en la esquina superior derecha, aparecerá un cuadro de diálogo, ingrese el nombre de la aplicación y escriba lo siguiente:

3. Después de que la creación sea exitosa, podrá ver la aplicación que recién creado en la página de administración actual. Luego agregue un valor clave a la aplicación. Simplemente haga clic en el signo " " en el lado derecho de la aplicación. De la siguiente manera, lo introducimos en la página web, así que seleccione "Lado web (JSAPI). )", introduzca la página web front-end a través de JS:

Después de que el valor clave se agregue correctamente, aparecerá en la lista de la aplicación actual, de la siguiente manera. Debe recordar esta cadena aquí y Necesito recordarlo en el siguiente código Usado:

4. El último paso es escribir el código de prueba de front-end. La idea básica es crear un contenedor div primero y luego introducir el mapa en este. contenedor a través de JSAPI, de la siguiente manera, muy simple, el parámetro clave se pasa al anterior Solo una cadena:

Abra este archivo html con un navegador, el efecto es el siguiente, Amap se ha introducido con éxito:

Llame a Baidu Map API

1. Primero, también es un desarrollador registrado de Baidu Map. Puede registrarse directamente en el sitio web oficial o iniciar sesión directamente con una cuenta de Baidu y hacer clic en "Consola". " en la esquina superior derecha para ingresar a la interfaz de usuario, luego haga clic en el botón "Crear aplicación", aparecerá la siguiente interfaz, ingrese el nombre de la aplicación, porque se introduce desde la página web de front-end, así que aquí elegimos " lado del navegador":

2. Después de que la aplicación se haya creado correctamente, se generará un valor AK para la aplicación actual. Esto se utiliza en el siguiente código. El valor se introduce en Baidu Map, de la siguiente manera, usted Necesito recordar esta cadena:

3. El último paso es escribir el código de prueba de front-end, de la siguiente manera, los pasos básicos son similares a Amap, primero cree un contenedor div y luego use JSAPI Introducir. Coloque el mapa en este contenedor y finalmente podrá mostrarlo normalmente. Reemplácelo con el valor AK de su propia aplicación:

Abra este archivo html con un navegador, el efecto es el siguiente, Baidu Map ha sido. guiado con éxito:

En este punto, hemos completado la llamada a la API de Amap y a la API de Baidu Map en la página web de front-end. En general, todo el proceso es muy simple y los pasos son muy claros. Siempre que esté familiarizado con el proceso anterior, podrá dominarlo rápidamente. El sitio web oficial también proporciona documentos de desarrollo muy detallados, lo cual es muy adecuado para principiantes. Aprenda y también se puede usar en línea. Edite para verificar el efecto. Si está interesado, puede buscarlo. Espero que el contenido compartido anteriormente pueda ser útil para usted.