關(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密匙(百度地圖傳送門)
<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>4.完成， 地圖如下
到此這篇關(guān)于關(guān)于Vue 3.0引入百度地圖 不兼容的解決辦法的文章就介紹到這了,更多相關(guān)Vue 3.0引入百度地圖 不兼容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了滑動(dòng)穿透(鎖body)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
解決vue-cli + webpack 新建項(xiàng)目出錯(cuò)的問(wèn)題
下面小編就為大家分享一篇解決vue-cli + webpack 新建項(xiàng)目出錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
小編之前介紹了通過(guò)vue.js計(jì)算屬性，不知道大家都學(xué)會(huì)了嗎。那這篇文章中我們將一起學(xué)習(xí)vue.js實(shí)現(xiàn)綁定class和style樣式，有需要的朋友們可以參考借鑒。2016-09-09
Vue?3中引入了組合式函數(shù)編程方式，可以更好地實(shí)現(xiàn)代碼的復(fù)用和可維護(hù)性。通過(guò)定義可組合的函數(shù)，可以將組件的邏輯和狀態(tài)進(jìn)行拆分和組合，實(shí)現(xiàn)更靈活的代碼組織方式。同時(shí)，組合式函數(shù)也支持響應(yīng)式數(shù)據(jù)和生命周期鉤子函數(shù)，更加貼近Vue開(kāi)發(fā)的實(shí)際場(chǎng)景2023-05-05
vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載示例
這篇文章主要為大家介紹了vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載的發(fā)發(fā)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue實(shí)現(xiàn)購(gòu)物車的監(jiān)聽(tīng)
這篇文章主要為大家詳細(xì)介紹了利用vue的監(jiān)聽(tīng)事件實(shí)現(xiàn)一個(gè)簡(jiǎn)單購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
解決vue-cli項(xiàng)目打包出現(xiàn)空白頁(yè)和路徑錯(cuò)誤的問(wèn)題
今天小編就為大家分享一篇解決vue-cli項(xiàng)目打包出現(xiàn)空白頁(yè)和路徑錯(cuò)誤的問(wèn)題。具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue2.0中click點(diǎn)擊當(dāng)前l(fā)i實(shí)現(xiàn)動(dòng)態(tài)切換class
本篇文章主要介紹了vue2.0中click點(diǎn)擊當(dāng)前l(fā)i實(shí)現(xiàn)動(dòng)態(tài)切換class ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
axios如何取消重復(fù)無(wú)用的請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于axios如何取消重復(fù)無(wú)用的請(qǐng)求的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問(wèn)題
這篇文章主要介紹了詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04