3.jpg
vue的百度地圖早就有vue-baidu-map這里就不贅述了，
自己去直接對著API寫就好了，基本上已經滿足絕大多數需求了還簡單方便。
vue-baidu-map 傳送門 https://dafrok.github.io/vue-baidu-map/#/zh/index
這里主要是在vue里面引入BMapGL，或者其他個性化地圖。
另外還有一篇文章是更加去全面的關于 BMapGL + BMapGLLib 引入的： vue引入百度地圖BMapGL，以及輔助工具BMapGLLib 的引入，BMapGL鼠標繪制功能。
因為異步的問題直接index.html引入會報錯，所以采用以下方式
關于地圖異步這個問題這里啰嗦一下(年紀大了就是喜歡啰嗦？)：
地圖組件渲染完畢時觸發，返回一個百度地圖的核心類和地圖實例。百度地圖組件是異步加載，請不要嘗試在組件的生命周期中訪問 BMap 核心類和 map 實例，如有需要，請在所需組件的 ready 事件回調函數的參數中獲取。
——【vue-baidu-map，全局組件事件】
地圖沒有生成的時候不要進行任何對地圖的操作。
譬如說你的坐標中心點初始化是要從后臺獲取數據進行初始化定位的。
一定要等到地圖渲染完成以后再進行操作。也就是關于地圖的初始化數據接口的請求要放在地圖ready里面。(這方面出錯容易引起的錯誤例子：一開始地圖空白，刷新一下就好了什么的。。。map報錯。map, BMap,undefined什么的。。。。)
文件源碼地址
文件結構圖解
文件結構圖解.png
在src里面創建一個bmpgl.js
其實建立在哪看你自己的意愿啦。(小聲逼逼)
// bmpgl.js
export function BMPGL(ak) {
return new Promise(function(resolve, reject) {
window.init = function() {
// eslint-disable-next-line
resolve(BMapGL)
}
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
script.onerror = reject
document.head.appendChild(script)
})
}
vue頁面里面引入
import { BMPGL } from "@/bmpgl.js"
export default {
name: "home",
data() {
return {
ak: "XXXXXXXXX", // 百度的地圖密鑰
myMap: null
};
},
mounted() {
this.initMap()
},
methods: {
initMap() {
// 傳入密鑰獲取地圖回調。
BMPGL(this.ak).then((BMapGL) => {
// 創建地圖實例
let map = new BMapGL.Map("container");
// 創建點坐標 axios => res 獲取的初始化定位坐標
let point = new BMapGL.Point(114.031761, 22.542826)
// 初始化地圖，設置中心點坐標和地圖級別
map.centerAndZoom(point, 19)
//開啟鼠標滾輪縮放
map.enableScrollWheelZoom(true)
map.setHeading(64.5)
map.setTilt(73)
// 保存數據
// this.myMap = map
})
.catch((err)=>{
console.log(err)
})
},
}
};
.allmap {
width: 100%;
height: 100vh;
position: relative;
z-index: 1;
}
