教程說明

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

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

源碼：View on GitHub（為方便大家測試使用的是我本人的key，僅用於測試不要用於線上環境）

DEMO：在Vue中完美的使用高德地圖

實現思路

以一個拖放地圖的例子來解釋，DEMO在上方

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

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

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

created () {
// 已載入高德地圖API，則直接初始化地圖
if (window.AMap && window.AMapUI) {
this.initMap()
// 未載入高德地圖API，則先載入API再初始化
} else {
// 載入高德地圖和UI組件
Promise.all([
remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`),
remoteLoad(http://webapi.amap.com/ui/1.0/main.js)
]).then(() => {
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>

推薦閱讀：

相關文章