在Vue中使用高德地圖API

豬不樂意發表於2017-09-19
Vue地圖API

最近專案中有使用到高德地圖，搜了下發現餓了麼的 vue-amap 比較知名。不過實際安裝使用中發現還是有很多問題的，並不友好。不但要學習 amap 的文件，也還要學習原生高德API文件，還不如直接使用原生來的方便。

而這篇教程的目的就是，怎麼在vue中使用高德地圖API

DEMO：vue-gaode.rxshc.com
GitHub: github.com/zuley/vue-g…

實現思路

  • 建立一個 mapDrag 的公共元件
  • 在元件的 created 生命週期，載入高德地圖API
  • API載入完成即開始執行地圖初始化
  • 地圖API暴露全域性變數 window.AMap 可以直接使用
  • 監聽地圖拖放事件，獲得資料後通知自定義事件，對元件外部提供事件介面

created 生命週期載入高德地圖API

載入的方式類似於 jquery 的指令碼載入，我這裡也是使用了別人封裝好的一個載入方法，各位直接使用或者自己改

async created () {
  // 已載入高德地圖API，則直接初始化地圖
  if (window.AMap && window.AMapUI) {
    this.initMap()
  // 未載入高德地圖API，則先載入API再初始化
  } else {
    await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
    await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
    this.initMap()
  }
}複製程式碼

初始化地圖

在 methods 中建立一個 initMap 的方法供載入地圖API之後呼叫。這裡就可以使用任意高德API

initMap () {
  // 載入PositionPicker，loadUI的路徑引數為模組名中 'ui/' 之後的部分
  let AMapUI = this.AMapUI = window.AMapUI
  let AMap = this.AMap = window.AMap
  AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
    let mapConfig = {
      zoom: 16,
      cityName: MapCityName
    }
    if (this.lat && this.lng) {
      mapConfig.center = [this.lng, this.lat]
    }
    let map = new AMap.Map('js-container', mapConfig)
    // 載入地圖搜尋外掛
    AMap.service('AMap.PlaceSearch', () => {
      this.placeSearch = new AMap.PlaceSearch({
        pageSize: 5,
        pageIndex: 1,
        citylimit: true,
        city: MapCityName,
        map: map,
        panel: 'js-result'
      })
    })
    // 啟用工具條
    AMap.plugin(['AMap.ToolBar'], function () {
      map.addControl(new AMap.ToolBar({
        position: 'RB'
      }))
    })
    // 建立地圖拖拽
    let positionPicker = new PositionPicker({
      mode: 'dragMap', // 設定為拖拽地圖模式，可選'dragMap'、'dragMarker'，預設為'dragMap'
      map: map // 依賴地圖物件
    })
    // 拖拽完成傳送自定義 drag 事件
    positionPicker.on('success', positionResult => {
      // 過濾掉初始化地圖後的第一次預設拖放
      if (!this.dragStatus) {
        this.dragStatus = true
      } else {
        this.$emit('drag', positionResult)
      }
    })
    // 啟動拖放
    positionPicker.start()
  })
}複製程式碼

呼叫

<mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"></mapDrag>複製程式碼

相關文章