高德地图

使用原生的可能要配置vue.config.js （只做记录，项目中未使用）

chainWebpack(config) {
    config.externals({
      'AMap': 'AMap'
    })
}

申请key的时候一定要选择web端！！！！！选个web服务搞了半天没搞出来

1.main.js：该搞的插件搞一搞

import VueAMap from 'vue-amap'

Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  plugin: ['AMap.Geocoder', 'AMap.Geolocation'],
  key: 'a40a2e9b505abececf908c380759e38e'
})

2.eslint去掉AMap的全局报错

module.exports = {
  root: true,
  env: {
     /* global AMap */
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    "space-before-function-paren": 0,
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

3.引入AMapManager ，一定要在data中注册，然后绑到组件上

<el-amap
      ref="map"
      class="amap-box"
      :center="center"
      :amap-manager="amapManager"
      :animateEnable="false"
      :zoom="zoom"
      :vid="'amap-vue'"
      :events="events"
    >
    </el-amap>

import { AMapManager } from 'vue-amap'
let amapManager = new AMapManager()

data(){
    return{
        amapManager 
    }
}