Использование API карты Gaode в Vue

Vue.js

Недавно в проекте использовалась карта Gaode, после поиска я обнаружил, что vue-amap от Ele.me относительно известен. Тем не менее, при фактической установке и использовании все еще возникает много проблем, что не является дружественным. Вам нужно не только изучить документацию по amap, но и нативную документацию по Amap API, лучше использовать нативное удобство напрямую.

Цель этого руководства состоит в том,Как использовать API карты Gaode в vue

ДЕМО:vue-gaode.rxshc.com
GitHub: GitHub.com/rent a/v UE-a…

Реализовать идеи

  • Создайте публичный компонент mapDrag
  • В созданном жизненном цикле компонента загрузите API карты Gaode.
  • После загрузки API начинается инициализация карты
  • API карты предоставляет глобальную переменную window.AMap, которую можно использовать напрямую.
  • Слушайте события перетаскивания карты, уведомляйте пользовательские события после получения данных и предоставляйте интерфейсы событий вне компонента.

Созданный жизненный цикл загружает API карты Gaode.

Метод загрузки похож на загрузку скрипта 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()
  }
}

Инициализировать карту

Создайте метод initMap в методах для вызова после загрузки API карты. Здесь вы можете использовать любой AutoNavi 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>
Категории