1.查看vue-baidu-map依賴提供的文檔:https://dafrok.github.io/vue-baidu-map/#/ 2.集成過程 (1)使用npm或者yarn進行安裝,會將依賴文件安裝進入package.json中看到 ①Npm install vue-baidu-map --save ②Yarn add vue-baidu-map --save (2)分為兩種引進方法 ①局部引入(輕量且快速) 1)首先導入依賴到這個頁面 2)使用依賴組件
3)使用組件的標簽baidu-map

4)設置初始容器的高度(默認為0的容器,看不見)
②全局引入(未采用) (3)實現地圖高度自動化 ①讓百度地圖提供綁定的樣式
②提供data值去占位

③當頁面創建和銷毀時,提供監聽事件

④提供方法去更改瀏覽器高度

3.添加點 (1)首先需要知道Vue中兩個對象的概念 ①Marker 表示地圖上一個圖像標注 構造方法為(Point, MarkerOptions),前一個為點,后一個為類似標題等基本配置,使用json格式
②Point 表示地理坐標點
構造函數需要傳遞經緯度

(2)實現方式 ①通過標簽BMap的ready來初始化地圖
②講BMap和Map兩個初始化得到的實例存放到本地,以備后用

③通過BMap實例化圖像標注並綁定點擊事件

④將其加載到當前Map上

(3)注意項 ①初始時,我直接使用JSON格式的經緯度左邊,沒有使用百度提供的Point構造方式,然后綁定事件會報錯。 4.繪圖 (1)初始化提供一個遮蔽層
(2)v-model關聯對應的數據paths,數據格式為二維數組,一維數組用來存放有多少組連線,二維用來存放點,會依照點的順序來一次連線。
(3)查詢到的數據直接存放在數據paths中就可以了