關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法

更新時(shí)間：2022年08月15日 10:08:02 作者：有大廠夢(mèng)的XiaoWeng

這篇文章主要介紹了關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過(guò)實(shí)例代碼給大家分享解決方法，需要的朋友可以參考下

關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法

1. 問(wèn)題：Vue 3.0引入百度地圖不兼容

百度地圖開(kāi)發(fā)平臺(tái)文檔封裝的vue版本暫時(shí)還沒(méi)有到 vue 3.0

如果用npm 引入并使用的話，會(huì)出現(xiàn)報(bào)錯(cuò)

at eval (bindEvent.js?4fab:8) at Array.forEach (<anonymous>) at Proxy.eval (....

（現(xiàn)在暫時(shí)是 BaiduMapVue2.x版本,如下圖）

2. 解決辦法

小編在各博客搜集辦法并結(jié)合，如下（小編是用cdn 引入js 用百度地圖原生api 來(lái)編寫(xiě)的）

新建 js 文件 (異步創(chuàng)建script標(biāo)簽引入百度地圖api)

export function baiduMap(ak) {
  return new Promise(function(resolve, reject) {
    window.baiduMap = function() {
      resolve()
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=baiduMap`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

配置“vue.congfig.js” (我們映入了CDN就不要再打包這個(gè)模塊了，所以通過(guò) externals 來(lái)排除這個(gè)模塊) 如下：

 externals: { "BMap": "BMap" }

3.vue頁(yè)面引入并執(zhí)行

生成密匙： ak密匙(百度地圖傳送門(mén))

 <template>
	<div id="map"></div>
</template>

<style type="text/css">
	#map {
		width: 100%;
		height: 500px;
	}
</style>

<script>
	import { baiduMap } from '../../baiduMap.js'
	export default {
		data() {
			return {
				ak: '你的百度地圖密匙' // 百度密匙
			}
		},
		mounted() {
			// 動(dòng)態(tài)引入較大類庫(kù)避免影響頁(yè)面展示
			this.$nextTick(() => {
				let _this = this;
				baiduMap(_this.ak).then( thatMap => {
				  // 創(chuàng)建地圖實(shí)例
					var map = new BMap.Map("map");
					// 創(chuàng)建地圖實(shí)例 
					var point = new BMap.Point(116.404, 39.915);
					// 創(chuàng)建點(diǎn)坐標(biāo) 
					map.centerAndZoom(point, 15);
					// 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別 
				})
			})
		}
	}
</script>