VUE 2.0 引入高德地圖,自行封裝組件

1. 高德地圖官網 申請帳號， 申請相應（JavaScript API）的 Key

2. 在項目中引入， 這里和其他的引入不同的是 直接在 index.html， 不是在 main.js 引入， 博主嘗試過把JS文件clone到本地，然后在main.js中引入 但是失敗了

3. 在 webpack.base.conf.js 中 設置 externals，  忘記設置的報錯好像是    amap is not defined

4. 根據業務需求， 封裝自己的 map組件

博主封裝的組件: 指定線路、覆蓋區域、點聚合等 

 5. 效果圖

　　5.1 點聚合 （虛擬數據 points.js）

　　

　　5.2 線路規划

　　

　　說明： step 按鈕是開始， 再次按下是暫停  並且記錄當前的marker點數

　　　　　提交(線路)  是確認所有marker點，

　　　　　微調  是調整節點， 再次按下是調整完畢（調整狀態時， 是無法提交數據的）

　　　　　提交數據  是將當前線路的所有點(經緯度) 提交

　　　　　重置  是clear所有操作

 

　　5.3  覆蓋區域

　　　　

　　　　說明：   step 同上  開始/暫停

　　　　　　　　提交(區域)   確認覆蓋區域

　　　　　　　　微調 同上

　　　　　　　　提交 同上

　　　　

　　這里的依賴 提示框是  element ui ， 可以根據自己情況， 自行封裝提示框

*--------------------------------------------------------------------------------------------------分割線，  最后附上 我寫在公司內部 wiki的說明文檔---------------------------------------*

 

1.調用方式

 

 1.1 結構部分

    <map-component mapWidth="100%" mapHeight="200px" v-bind:options="true"></map-component>

     mapWidth/mapHeight 指定地圖寬高， 單位可以為 百分比/ px （注意不要加 ；）

    v-bind:options="true"   true 指默認有操作欄，  false 隱藏操作欄

    2.2 JS 部分 

<script>

import mapComponent from '@/components/Map'
...
export default {
  components: { mapComponent },
  ...
}

 

附上我寫的組件源碼地址： https://github.com/IceGogh/vue-components