prefácio
-
Onde houver demanda, haverá mercado, e o Baidu Maps também abrirá algumas APIs gratuitas. para fornecer alguns serviços básicos de mapas.
-
Hoje vamos explicar o processo de solicitação de um AK do Baidu Maps e o uso básico após a conclusão do aplicativo, para que você possa navegar se precisar no futuro.
AK-Application
1. Em primeiro lugar, a maneira mais direta de aprendermos uma tecnologia é lendo os documentos oficiais. Você pode pesquisar na plataforma aberta do mapa Baidu ou entrar no link abaixo
2. Entre no site oficial
3. Clique no console, se você não estiver logado, você vai pular para a página de login e usar o Baidu para digitalizar para fazer login diretamente
4. Após entrar, página de gerenciamento de aplicativos - meu aplicativo - criar aplicativo
5. Nome do aplicativo: Pegue um tipo de nome de projeto relevante, selecione a lista branca do navegador e preencha *
Observação: na primeira vez que você solicitar o Ak, ele solicitará que você preencha a descrição das informações relevantes (usadas para descrever para que o AK é usado). A descrição verdadeira geralmente passará na revisão
6. Após a criação bem-sucedida
resumo:
Mas quando vemos esta página, isso significa que nosso aplicativo AK foi bem-sucedido e qual é o uso de AK. AK é equivalente à identidade do nosso mapa Baidu e também será vinculado às informações de nome real, que só podem ser usadas para desenvolvimento normal (não para uso ilegal). Mas depois que tivermos o AK, podemos consultar o documento de desenvolvimento para chamar o mapa do Baidu. Também pode ser usado para Vue-baidu-map, que será discutido mais adiante no artigo
Não fale bobagens e vá direto ao código
Nota: Geralmente, quando você copia, ele relata um erro, o que não está definido, e se você observar com atenção, descobrirá que é porque você não adicionou https: resultando em nenhum acesso, portanto, este é o relatório de erro , basta adicionar isso (tenha cuidado para não esquecer o último :)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: '微软雅黑';
}
</style>
<script
type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你申请的AK"
></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map('allmap') // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
</script>Remova o ícone do Baidu no canto inferior direito
// 去除百度地图的图标 根据实际情况看是否要加样式穿透(::v-deep)
::v-deep .anchorBL {
display: none !important;
}Resumir:
Após esse processo, acredito que você também teve uma impressão preliminar profunda sobre o aplicativo para o desenvolvedor de mapas Baidu AK e o uso básico, mas a situação que encontramos no desenvolvimento real deve ser diferente, então precisamos entender seu princípio, Tudo continua o mesmo. Vamos, bata nos trabalhadores!
Por favor, aponte quaisquer deficiências, obrigado -- Fengguowuhen