Recently, AmAP was used in the project. After searching, I found that VuE-AMap of Ele. me is relatively well-known. However, there are still many problems in the actual installation and use, which is not friendly. Not only do you need to learn amAP documentation, but you also need to learn the native Autonavi API documentation.

The purpose of this tutorial is how to use the AMap API in VUE

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

Implementation approach

  • Create a public component for mapDrag
  • In the component’s Created life cycle, load the Amap API
  • Map initialization starts as soon as the API is loaded
  • The map API exposes the global variable window.amap to be used directly
  • Listen for map drag-and-drop events, notify custom events when data is available, and provide an event interface to components

The Created lifecycle is loaded into the Amap API

The loading method is similar to jquery script loading. Here I also use a loading method encapsulated by others. You can use it directly or change it yourself

async created () {
  // The map has been loaded into the Amap API, then directly initialize the map
  if (window.AMap && window.AMapUI) {
    this.initMap()
  // If the amap API is not loaded, load the API first and then initialize it
  } 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()
  }
}Copy the code

Initialize the map

Create an initMap method in Methods to call after loading the map API. You can use any Autonavi API here

initMap () {
  // Load the PositionPicker. The loadUI path argument is the part after 'UI /' in the module name
  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)
    // Load the map search plugin
    AMap.service('AMap.PlaceSearch', () = > {this.placeSearch = new AMap.PlaceSearch({
        pageSize: 5.pageIndex: 1.citylimit: true.city: MapCityName,
        map: map,
        panel: 'js-result'})})// Enable the toolbar
    AMap.plugin(['AMap.ToolBar'].function () {
      map.addControl(new AMap.ToolBar({
        position: 'RB'}})))// Create a map drag
    let positionPicker = new PositionPicker({
      mode: 'dragMap'.// set dragMap mode, optional 'dragMap', 'dragMarker', default 'dragMap'
      map: map // Rely on map objects
    })
    // Drag completes sending custom Drag events
    positionPicker.on('success', positionResult => {
      // Filter out the first default drag and drop after initializing the map
      if (!this.dragStatus) {
        this.dragStatus = true
      } else {
        this.$emit('drag', positionResult)
      }
    })
    // Start drag and drop
    positionPicker.start()
  })
}Copy the code

call

<mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"></mapDrag>Copy the code