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

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

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

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

1. 問題：Vue 3.0引入百度地圖不兼容

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

如果用npm 引入并使用的話，會出現(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 來編寫的）

新建 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è)模塊了，所以通過 externals 來排除這個(gè)模塊) 如下：

 externals: { "BMap": "BMap" }

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

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

 <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() {
			// 動態(tài)引入較大類庫避免影響頁面展示
			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)和地圖級別 
				})
			})
		}
	}
</script>