關於Vue 3.0引入百度地圖不兼容的解決辦法

Posted on by

關於Vue 3.0引入百度地圖 不兼容的解決辦法

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

百度地圖開發平臺文檔 封裝的vue版本暫時還沒有 到 vue 3.0

如果 用npm 引入並使用的話，會出現報錯

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

（現在暫時是 BaiduMapVue2.x版本,如下圖）

2. 解決辦法

小編在 各博客搜集 辦法並結合，如下（小編是用cdn 引入js 用百度地圖原生api 來編寫的）

新建 js 文件 (異步創建script標簽 引入百度地圖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就不要再打包這個模塊瞭，所以通過 externals 來排除這個模塊) 如下：

 externals: { "BMap": "BMap" }

3.vue頁面 引入並執行

生成密匙： 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() {
			// 動態引入較大類庫避免影響頁面展示
			this.$nextTick(() => {
				let _this = this;
				baiduMap(_this.ak).then( thatMap => {
				  // 創建地圖實例
					var map = new BMap.Map("map");
					// 創建地圖實例 
					var point = new BMap.Point(116.404, 39.915);
					// 創建點坐標 
					map.centerAndZoom(point, 15);
					// 初始化地圖，設置中心點坐標和地圖級別 
				})
			})
		}
	}
</script>

4.完成， 地圖如下

到此這篇關於關於Vue 3.0引入百度地圖 不兼容的解決辦法的文章就介紹到這瞭,更多相關Vue 3.0引入百度地圖 不兼容內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：