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