vue--ui:antd pro框架--vue.config.js引入高德地图--描绘轨迹

首先在index.html中引入

<!--引入高德地图JSAPI -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=申请的key"></script>
<!--引入UI组件库（1.0版本） -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>

这里有个坑，在vue.config.引入

const vueConfig = {
  configureWebpack: {
    // webpack plugins
    externals: {
      AMap: 'AMap'
    }
  },
}

module.exports = vueConfig

有的没有vue.config.js

是webpack.base.config.js中引入

这个文件在build中的webpack.base.config.js中引入

// module.exports = {
//   externals: {
//     'AMap': 'AMap'
//   }
// }

import AMap from 'AMap'

data () {
  return {
    location1: [],轨迹变量
    centerLNT: 0.00,中心点x
    centerLAT: 0.00,中心点y
　　}
}

mounted () { 
这里是异步加载方法我没有用这个 

// this.$nextTick(() => { // this.amapView() // })  
这个是手动引入的经纬度作为例子，最后需要自己ajax请求后端数据替换就可以了 

this.location1 = [[109.9056, 40.653845], [109.905595, 40.653846], [109.905595, 40.653846], [109.905595, 40.653846], [109.905848, 40.653814], [109.905848, 40.653814], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.906021, 40.653763], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.90563, 40.653901], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.905827, 40.653842], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.90582, 40.653711], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905669, 40.653937], [109.905955, 40.653766], [109.905955, 40.653766], [109.905955, 40.653766], [109.905955, 40.653766], [109.905955, 40.653766], [109.905955, 40.653766], [109.905955, 40.653766], [109.905955, 40.653766], [109.905955, 40.653766], [109.905955, 40.653766], [109.905955, 40.653766], [109.905955, 40.653766], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905787, 40.653812], [109.905895, 40.653751], [109.905895, 40.653751], [109.905895, 40.653751]] 
调用高德描绘轨迹 
this.init() 
}, 
methods: { 

init: function () {
  this.location1.forEach((item, index, arr) => {
    this.centerLNT = this.centerLNT + item[0]
    this.centerLAT = this.centerLAT + item[1]
  })
  let centerLNT = this.centerLNT / this.location1.length;
  let centerLAT = this.centerLAT / this.location1.length;
  let map = new AMap.Map('container', {
    center: [centerLNT, centerLAT],
    resizeEnable: true,
    zoom: 10
  })
  var marker = new AMap.Marker({
    map: map,
    position: this.location1[0],
    offset: new AMap.Pixel(-13, -13),
    autoRotation: false,
    angle: 0
  })
  var polyline = new AMap.Polyline({
    map: map,
    path: this.location1,
    showDir: true,
    strokeColor: 'transparent', // 线颜色
    // strokeOpacity: 1, // 线透明度
    strokeWeight: 6 // 线宽
    // strokeStyle: "solid"  //线样式
  })
  var passedPolyline = new AMap.Polyline({
    map: map,
    strokeColor: '#AF5',
    strokeWeight: 6
  })
  marker.on('moving', function (e) {
    passedPolyline.setPath(e.passedPath)
  })
  map.setFitView()

这个是我引入后查看有没有引进来地图模块用的
  marker.moveAlong(this.location1, 200)
  // AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
  //   map.addControl(new AMap.ToolBar())
  //   map.addControl(new AMap.Scale())
  // })
}

}

官网https://lbs.amap.com/api/javascript-api/summary

看的别人的例子https://blog.csdn.net/Acceleactor/article/details/81780142