高德地图API引用

main.js

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '这里放你在高德中申请的KEY',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  uiVersion: '1.0', // ui库版本，不配置不加载,
  v: '1.4.4'
})

ditu.vue

<template>
  <div id="demo">
    <a-button @click="aa">尝试搜索路线按钮</a-button>
    <el-amap vid="amapDemo" :amap-manager="amapManager" :events="mapEvents" class="amap-demo" v-if="showMap"> </el-amap>
  </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager()

export default {
  name: 'Demo',
  data () {
    const self = this
    return {
      amapManager,
      mapEvents: {
        init (o) {
          console.log(55555555, o)
          o.setMapStyle('amap://styles/blue') // 自定义的高德地图的样式，我选的是马卡龙
          /* global AMap */
          var marker = new AMap.Marker({
            // 点图标
            position: [116.379028, 39.865042]
          })
          o.setZoomAndCenter(16, [116.379028, 39.865042])
          marker.setMap(o)
          // 路线规划
          o.plugin(['AMap.Driving'], function () {
            var driving = new AMap.Driving({
              map: o
            })
            // 位置经纬度+ 驾车路线规划,选用
            // 参考连接： https://lbs.amap.com/api/javascript-api/example/driving-route/plan-route-according-to-lnglat
            // 官方文档说明： https://lbs.amap.com/api/javascript-api/reference/route-search#m_AMap.Driving
            // driving.search(
            //   // new AMap.LngLat(116.379028, 39.865042),
            //   // new AMap.LngLat(116.427281, 39.903719),
            //   function (status, result) {
            //     if (status === 'complete') {
            //       console.log('绘制成功')
            //     } else {
            //       console.log('绘制失败', result)
            //     }
            //   }
            // )
            // 地点关键字+ 驾车路线规划
            driving.search(
              [
                {
                  keyword: '北京市地震局(公交站)'
                  // city: '北京'
                },
                {
                  keyword: '亦庄文化园(地铁站)'
                  // city: '北京'
                }
              ],
              self.list,
              function (status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                  console.log('绘制驾车路线完成')
                } else {
                  console.log('获取驾车数据失败：' + result)
                }
              }
            )
            o.addControl(driving)
          })
        }
      },
      map: null,
      list: [
        {
          keyword: '北京市地震局(公交站)'
          // city: '北京'
        },
        {
          keyword: '亦庄文化园(地铁站)'
          // city: '北京'
        }
      ],
      showMap: true
    }
  },
  created () {
    // 实例化的操作前置
    lazyAMapApiLoaderInstance.load().then(
      (function (thisVm) {
        // global AMap
        const map1 = new AMap.Map('demo', {
          center: new AMap.LngLat(121.59996, 31.197646)
        })
        console.log(77777777, AMap)
        thisVm.map = map1
      })(this)
    )
  },
  mounted () {},
  watch: {},
  methods: {
    aa () {
      this.showMap = false
      this.list = [
        {
          keyword: '惠州佳兆业'
          // city: '北京'
        },
        {
          keyword: '北京故宫'
          // city: '北京'
        }
      ]
      this.$nextTick(() => {
        this.showMap = true
      })
    }
  }
}
</script>
<style scoped>
.amap-demo {
  width: 100%;
  height: 500px;
}
</style>