vue3中使用百度地图

1、在入口的index.html中添加以下代码，更换成自己的key

<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=yourkey"></script>

2、新增一个.d.ts文件，全局声明 BMapGL 变量

declare const BMapGL: any

不然的话会报这种错误 找不到名称“BMapGL”。

3、增加地图容器

<div id="bdMap"></div>

注意要设置好容器的大小

#bdMap {
  width: 100%;
  height: 100%;
}

4、初始化地图

let map: any = null
const initMap = () => {
  // 创建地图实例
  map = new BMapGL.Map('bdMap', {
    enableRotate: false,
    enableTilt: false
  })
  map.centerAndZoom(new BMapGL.Point(121.491, 31.233), 11) // 设置中心点坐标和地图级别
}
onMounted(() => {
  initMap()
})

注意点：

• 要设置地图的中心点和级别，不然会显示空白

• 初始化的通常放在onMounted中，要确保页面已渲染，再对DOM进行操作