Vue3中引入百度地图

1. 准备工作

申请百度地图api秘钥、这里就不过多介绍，最终到这个页面获取

不建议使用vue-baidu-map 这个库，一个原因是这个库已经很久没有维护了，还是使用的vue2.0版本，另一个原因是原生的百度地图更加灵活好用。

2. 引入百度地图

在你的项目index.html中添加百度地图api连接

<script src="//api.map.baidu.com/api?type=webgl&v=2.0&ak=你的秘钥"></script>

3.完整代码

<template>       
        <div id="container" ></div>
</template>
<script setup>   
    import {onMounted} from 'vue'
    onMounted(() => {
        let BMap = window.BMapGL
        let map = new BMap.Map("container");
        
        let point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15); 
        
        //控件
        map.addControl(new BMap.NavigationControl3D())
        map.addControl(new BMap.ScaleControl())
        map.addControl(new BMap.ZoomControl())
       
    })
 
</script>
<style>
    #container{
        width: 100%;
        height: 100vh;
    }
</style>

4.效果图