vue使用npm集成百度地圖


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中就可以了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM