vue3引入百度地图

把百度地图的api链接放入到public的index.htlm <script src="//api.map.baidu.com/api?type=webgl&v=2.0&ak=秘钥"></script>

在你要的页面上使用

重点： 因为现在百度地图等一些地图还没有做vue3的适配所以一定要在前面写上 如下列

var BMap = window.BMapGL;

我这里是以第一版，所以也可以这样BMap

如果不写window的话他就报错导致代码运行不了

完整代码：

<!-- 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>

正常得ts只是写法不一样而已，如果不懂可以请教