vue3+ts引入百度地图

第一步：
首先在百度地图api获取他的秘钥
把获取的秘钥和链接放到vue的public的inde.html中

https://api.map.baidu.com/api?type=webgl&v=2.0&ak=秘钥

第二步：
在你要使用的页面上使用引入进去就行，有一个地方要注意因为现在百度地图等还没有适配vue3的所以一定要加window在前面如下

let Bmap = window.BMapGL

一定要加window不然会报错
我的事第一版所以我使用的BMapGL，如果你是第二第三版本的话可以使用BMap
完整代码：

<!-- vue 3 引入百度api -->
<template>
  <div id="allmap"></div>
</template>

<script>
import { defineComponent, onMounted } from "vue"
import {echartsMapList} from "./map"
export default defineComponent({
  setup() {
    onMounted(() => {
      //   loadMapScript(); // 加载百度地图资源
      init()
    })
    // 初始化地图
    const init = () => {
      let Bmap = window.BMapGL // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
      var b = new Bmap.Map("allmap")
      b.centerAndZoom(new Bmap.Point(114.048529, 22.757597), 13)
      b.enableScrollWheelZoom(true)
      var a = ["114.066392,22.748699", "114.07991,22.640074"]
      // b.setMapStyleV2({ styleJson: echartsMapList })
     }
  },
})
</script>
<style lang="less" scoped>
#allmap {
  // 注意给dom宽高，不然地图不出来
  width: 100%;
  height: 100%;
}
</style>

这就是实现的样子啦。

不懂可以虚心请教，你搞不定不代表博主做不到