Direto ao ponto, os negócios de desenvolvimento relacionados a mapas estão se tornando cada vez mais comuns no trabalho hoje em dia. No momento, o desenvolvimento de mapas convencionais no mercado ainda é baseado em Baidu e Gaode. Hoje, falarei sobre a configuração do mapa Gaode e a inicialização no Vue.Criado para ajudar a todos a entender melhor e mais rápido o conteúdo relacionado ao desenvolvimento do mapa Gaode.
1. Cadastrar o mapa
Seja o desenvolvimento do mapa Amap ou Baidu, o primeiro passo é cadastrar e solicitar o uso em sua plataforma de gestão, vamos tomar como exemplo o desenvolvimento do Amap. Primeiro faça login na plataforma aberta Gaode, o link do site: Gaode Open Platform .
Clique em Register or Login Account no canto superior direito, porque o AutoNavi é afiliado ao Ali, atualmente não suporta o login do WeChat, mas você pode usar o Alipay para fazer o login. Após o login bem-sucedido, clique em "Console" no canto superior direito para entrar no console Gaode. Em seguida, clique em "Meus aplicativos" no menu à esquerda "Gerenciamento de aplicativos".
Clique em "Criar novo aplicativo" à direita e um novo aplicativo será gerado após o preenchimento do formulário. Clique em "Adicionar" ao lado direito do novo aplicativo para preencher as informações do formulário. A plataforma de serviço seleciona "Web End ( JS API)" para demonstração desta vez e, finalmente, o envio irá gerar uma configuração de aplicativo de mapa utilizável.
Após a configuração, preste atenção à chave acima e à chave de segurança, que são as duas informações de autenticação de identidade usadas principalmente para inicializar o mapa no programa posteriormente.
2. Crie um novo mapa Gaode em vue
Depois de configurar o mapa no console Gaode, você pode criar um mapa em vue, primeiro use o método NPM para instalar e usar o Loader e execute o seguinte comando:
npm i @amap/amap-jsapi-loader --save
Em seguida, defina a chave de segurança do mapa globalmente. O valor da chave de segurança é a chave de segurança registrada no console do Gaode antes e adicione o seguinte código:
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: ''
}
Crie uma tag div como o contêiner do mapa na interface que precisa exibir o mapa e defina o id do contêiner do mapa:
<template>
<div id="gao-de-map" style="height: 700px;width: 100%"></div>
</template>
Introduzir amap-jsapi-loader na interface que precisa exibir o mapa
import AMapLoader from '@amap/amap-jsapi-loader';
declarar objeto de mapa
data(){
return{
map:null,
}
},
Crie uma função de inicialização de mapa initMap e chame a função de inicialização de mapa montada, onde a chave em initMap é a chave configurada no ambiente de trabalho do 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, você pode ver o mapa gerado na página da web.
3. Adicione uma escala no canto inferior esquerdo do mapa, zoom in e out e um volante
no canto inferior direito. Adicione três plug-ins ao inicializar o mapa na função de inicialização 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);
})
}
Depois, há plug-ins correspondentes nos cantos inferior esquerdo e inferior direito do mapa.
Resumo: Acima está a configuração do mapa no desenvolvimento do Gaode Map e as etapas de inicialização e criação do mapa no Vue, espero que possa ajudar a todos, obrigado!