關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法
更新時間：2022年08月15日 10:08:02 作者：有大廠夢的XiaoWeng
這篇文章主要介紹了關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過實例代碼給大家分享解決方法，需要的朋友可以參考下
關(guān)于Vue 3.0引入百度地圖 不兼容的解決辦法
1. 問題：Vue 3.0引入百度地圖 不兼容
百度地圖開發(fā)平臺文檔 封裝的vue版本暫時還沒有 到 vue 3.0
如果 用npm 引入并使用的話，會出現(xiàn)報錯
at eval (bindEvent.js?4fab:8) at Array.forEach (<anonymous>) at Proxy.eval (....
（現(xiàn)在暫時是 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就不要再打包這個模塊了，所以通過 externals 來排除這個模塊) 如下：
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)建地圖實例
var map = new BMap.Map("map");
// 創(chuàng)建地圖實例
var point = new BMap.Point(116.404, 39.915);
// 創(chuàng)建點坐標(biāo)
map.centerAndZoom(point, 15);
// 初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別
})
})
}
}
</script>4.完成， 地圖如下
到此這篇關(guān)于關(guān)于Vue 3.0引入百度地圖 不兼容的解決辦法的文章就介紹到這了,更多相關(guān)Vue 3.0引入百度地圖 不兼容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了滑動穿透(鎖body)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
下面小編就為大家分享一篇解決vue-cli + webpack 新建項目出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
小編之前介紹了通過vue.js計算屬性，不知道大家都學(xué)會了嗎。那這篇文章中我們將一起學(xué)習(xí)vue.js實現(xiàn)綁定class和style樣式，有需要的朋友們可以參考借鑒。2016-09-09
Vue?3中引入了組合式函數(shù)編程方式，可以更好地實現(xiàn)代碼的復(fù)用和可維護(hù)性。通過定義可組合的函數(shù)，可以將組件的邏輯和狀態(tài)進(jìn)行拆分和組合，實現(xiàn)更靈活的代碼組織方式。同時，組合式函數(shù)也支持響應(yīng)式數(shù)據(jù)和生命周期鉤子函數(shù)，更加貼近Vue開發(fā)的實際場景2023-05-05
這篇文章主要為大家介紹了vue中多個文件下載實現(xiàn)打包壓縮下載的發(fā)發(fā)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家詳細(xì)介紹了利用vue的監(jiān)聽事件實現(xiàn)一個簡單購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題
今天小編就為大家分享一篇解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue2.0中click點擊當(dāng)前l(fā)i實現(xiàn)動態(tài)切換class
本篇文章主要介紹了vue2.0中click點擊當(dāng)前l(fā)i實現(xiàn)動態(tài)切換class ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要給大家介紹了關(guān)于axios如何取消重復(fù)無用的請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁面cannot GET/問題
這篇文章主要介紹了詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁面cannot GET/問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04