1、去官网百度地图开放平台申请密钥：https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey
image.png
image.png
image.png
2、在public/index.html中引入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥ak"></script>
3、渲染地图
<!-- vue 3 引入百度api -->
<template>
<div id="allmap"></div>
</template>
<script>
import { defineComponent, nextTick, onMounted } from "vue";
export default defineComponent({
setup() {
onMounted(() => {
nextTick(() => {
initMap();
});
});
const initMap = () => {
let Bmap = window.BMap;
let map = new Bmap.Map("allmap");
map.centerAndZoom(new Bmap.Point(104.04263635868074, 30.556100647961866),11);
};
return {} ;
},
});
</script>
<style scoped>
#allmap {
width: 100%;
height: 400px;
}
</style>
提示：如有错误请与我联系谢谢！
