注册高德
- 进入网址 高德地图
- 注册账号
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/bd593b32322b460e9b2127703fe06540.png#pic_center)
3.创建新应用
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/4313d85ca56e4001bb811bf61e97446e.png#pic_center)
- 添加key,选择提交即可
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/834850cdcf6c4516993b1156cdd2a568.png#pic_center)
在vue3中使用高德
- 创建vue项目与安装高德地图所需依赖
npm init vue@latest
npm i @amap/amap-jsapi-loader --save
- 创建地图组件: map.vue
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null;
onMounted(() => {
window._AMapSecurityConfig = {
securityJsCode: "「你申请的安全密钥」",
};
AMapLoader.load({
key: "",
version: "2.0",
plugins: ["AMap.Scale"],
})
.then((AMap) => {
map = new AMap.Map("container", {
viewMode: "3D",
zoom: 11,
center: [116.397428, 39.90923],
pitch: 10,
});
})
.catch((e) => {
console.log(e);
});
});
onUnmounted(() => {
map?.destroy();
});
</script>
<template>
<div id="container"></div>
</template>
<style scoped>
#container {
width: 100%;
height: 800px;
}
</style>