vue引入高德地图

1.首先在官网申请密钥:https://lbs.amap.com申请密钥

2. index.html中引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=刚申请的密钥&plugin=AMap.ControlBar">
</script>

3.建个放map的文件  maps.vue

<template>
  <div id="container" />
</template>

<script>
import AMap from 'AMap' /* 引入高德地图 */
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.init()
/*init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到 html 元素 div#container*/
  },
  methods: {
    init() {
      var map = new AMap.Map('container', {})
      var truckOptions = {
        map: map,
        policy: 0,
        size: 1,
        city: 'beijing',
        panel: 'panel'
      }
      var driving = new AMap.TruckDriving(truckOptions)

      var path = []
      path.push({ lnglat: [116.303843, 39.983412] })/* 起点 */
      path.push({ lnglat: [116.321354, 39.896436] })/* 途径 */
      path.push({ lnglat: [116.407012, 39.992093] })/* 终点 */

      driving.search(path, function(status, result) {
        // result即是对应的货车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
          // log.success('绘制货车路线完成')
        } else {
          // log.error('获取货车规划数据失败：' + result)
        }
      })
    }
  }
}
</script>

<style>
#container {width:300px; height: 408px; }
</style>

会报AMap 未定义

4.webpack.base.conf.js

在module.exports = {}里加入

externals: {
      'AMap': 'AMap' // 高德地图配置
    }

vue- element-admin是在vue.conf.js中加

vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。

重启-->

效果：

这里我需要做货车的线路index.html 引入的script  plugin=AMap.TruckDriving

<template>
  <div class="maps" >
    <div id="container"></div>
    <div id="panel"></div>
  </div>
</template>

<style lang="less" scoped>
.maps {
  width:100%;
  height: 450px;
  #container {
    width: 100%;
    height: 100%;
  }
  #panel {
    position: absolute;
    background-color: white;
    max-height: 95%;
    overflow-y: auto;
    top: 22px;
    right: 10px;
    width: 280px;
  }
  #panel .amap-lib-driving {
    border-radius: 4px;
    overflow: hidden;
  }
}