Vue 完美使用高德地图API

开源项目说明

本开源项目目的就是,怎么在vue中使用高德地图API

项目地址:https://github.com/zuley/vue-gaode

运行项目

# 安装依赖
npm install
# 运行项目
npm run serve

实现思路

以一个拖放地图的例子来解释,DEMO在上方

  1. 创建一个 mapDrag 的公共组件
  2. 在组件的 created 生命周期,载入高德地图API
  3. API载入完成即开始执行地图初始化
  4. 地图API暴露全局变量 window.AMap 可以直接使用
  5. 监听地图拖放事件,获得数据后通知自定义事件,对组件外部提供事件接口

载入

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>