vue3 使用 百度地图

Vue3 使用 百度地图的报错的问题

vue3 项目中使用百度地图总是报错 BMap is not defined.

public/index.html 中加入

<script
  type="text/javascript"
  src="http://api.map.baidu.com/api?v=3.0&ak=你的ak"
></script>

.eslintrc.js 中加入

module.exports = {
  ...,
  globals: {
     BMap: true
  }
}

vue.config.js 中加入

module.exports = {
   ...,
   configureWebpack: {
      externals: {
        "BMap": "BMap"
      }
   }
}

重新运行项目

在组件中添加 import BMap from ‘BMap’

onMounted(() => {
  var map = new BMap.Map("map");
  var point = new BMap.Point(116.404, 39.915);
  map.centerAndZoom(point, 5);
  map.addControl(new BMap.NavigationControl());
});

如果为 TS

import BMap from ‘BMap’报错

解决：

在 src 下新建文件 shims-BMap.d.ts 内容为

declare module 'BMap' {
  const BMap: any
  export default BMap
}

参考取自：

vue3 使用百度地图