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 使用百度地图