Directamente al grano, el negocio de desarrollo relacionado con mapas se está volviendo cada vez más común en el trabajo hoy en día. En la actualidad, el desarrollo de mapas principal en el mercado todavía se basa en Baidu y Gaode. Hoy hablaré sobre la configuración de mapas de Gaode y la inicialización en Vue Creado para ayudar a todos a comprender mejor y más rápido el contenido relacionado con el desarrollo del mapa Gaode.
1. Registrar el mapa
Ya sea el desarrollo de Amap o el mapa de Baidu, el primer paso es registrarse y solicitar su uso en su plataforma de gestión.Tomemos como ejemplo el desarrollo de Amap. Primero inicie sesión en la plataforma abierta de Gaode, el enlace del sitio web: Gaode Open Platform .
Haga clic en Registrarse o Iniciar sesión en la esquina superior derecha, porque AutoNavi está afiliado a Ali, actualmente no admite el inicio de sesión de WeChat, pero puede usar Alipay para iniciar sesión. Después de iniciar sesión correctamente, haga clic en "Consola" en la esquina superior derecha para ingresar a la consola de Gaode. A continuación, haga clic en "Mis aplicaciones" en el menú de la izquierda "Administración de aplicaciones".
Haga clic en "Crear nueva aplicación" a la derecha y se generará una nueva aplicación después de completar el formulario. Haga clic en "Agregar" en el lado derecho de la nueva aplicación para completar la información del formulario. La plataforma de servicio selecciona "Web End ( JS API)" para demostración esta vez, y finalmente Enviar generará una configuración de aplicación de mapa utilizable.
Después de la configuración, preste atención a la clave anterior y la clave de seguridad, que son las dos informaciones de autenticación de identidad que se utilizan principalmente para inicializar el mapa en el programa más tarde.
2. Cree un nuevo mapa de Gaode en vue
Después de configurar el mapa en la consola de Gaode, puede crear un mapa en vue, primero use el método NPM para instalar y usar Loader, y ejecute el siguiente comando:
npm i @amap/amap-jsapi-loader --save
Luego configure la clave de seguridad del mapa globalmente, el valor de la clave de seguridad es la clave de seguridad registrada en la consola de Gaode antes, y agregue el siguiente código:
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: ''
}
Cree una etiqueta div como el contenedor del mapa en la interfaz que necesita mostrar el mapa y establezca la identificación del contenedor del mapa:
<template>
<div id="gao-de-map" style="height: 700px;width: 100%"></div>
</template>
Introduce amap-jsapi-loader en la interfaz que necesita mostrar el mapa
import AMapLoader from '@amap/amap-jsapi-loader';
declarar objeto de mapa
data(){
return{
map:null,
}
},
Cree una función de inicialización de mapa initMap y llame a la función de inicialización de mapa montada, donde la clave en initMap es la clave configurada en el banco de trabajo de AutoNavi
mounted() {
this.initMap()
},
methods:{
initMap(){
AMapLoader.load({
key:"", // 申请好的Web端开发者Key，首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("gao-de-map",{
//设置地图容器id
viewMode:"2D", //是否为3D地图模式
zoom:13, //初始化地图级别
center:[116.397428, 39.90923], //初始化地图中心点位置（北京）
});
}).catch(e=>{
console.log(e);
})
},
},
Finalmente, puede ver el mapa generado en la página web.
3. Agregue una escala en la esquina inferior izquierda del mapa, acerque y aleje y un volante
en la esquina inferior derecha Agregue tres complementos al inicializar el mapa en la función de inicialización initMap:
initMap(){
AMapLoader.load({
key:"", // 申请好的Web端开发者Key，首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins:['AMap.Scale',
'AMap.ToolBar',
'AMap.ControlBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("gao-de-map",{
//设置地图容器id
viewMode:"2D", //是否为3D地图模式
zoom:13, //初始化地图级别
center:[116.397428, 39.90923], //初始化地图中心点位置（北京）
});
this.map.addControl(new AMap.Scale()) // 添加左下角的比例尺
let toolBar = new AMap.ToolBar({
position: {
bottom: '20px',
right: '35px'
}
})
let controlBar = new AMap.ControlBar({
position: {
bottom: '100px',
right: '10px'
}
})
this.map.addControl(toolBar) // 添加右下角的放大缩小
this.map.addControl(controlBar) // 方向盘
}).catch(e=>{
console.log(e);
})
}
Luego, hay complementos correspondientes en las esquinas inferior izquierda e inferior derecha del mapa.
Resumen: Lo anterior es la configuración del mapa en el desarrollo de Gaode Map y los pasos para inicializar y crear el mapa en Vue. Espero que pueda ayudar a todos, ¡gracias!