vue 3.0 高德地图 【点击 marker 实现 路径动态回放 + 途经点停靠 】

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

```javascript
 const point = [
    { lnglat: ['121.473701', '31.230416'], city: '上海', number: 10 },
    { lnglat: ['113.264434', '23.129162'], city: '广州', number: 10 },
    { lnglat: ['104.065735', '30.659462'], city: '成都', number: 10 }
  ]
  const map = new AMap.Map('container', {
    zoom: 5,
    resizeEnable: true,
    animateEnable: true
  })
  let markers = []
  // marker 制作
  function makeMarker({ lnglat, city, number }) {
    const marker = new AMap.Marker({
      position: lnglat
    })
    const content = `
    

        
${city}仓 ${number}

`
const labelConfig = {
offset: [0, 0],
content,
direction: 'top'
}
marker.setLabel(labelConfig)
marker.on('click', (e) => {
makeDriving()
})
return marker
}
point.forEach((item) => {
const itemMarker = makeMarker(item)
markers.push(itemMarker)
})
map.add(markers)
// 统一设置图片大小
function setImgSize(url, size = [25, 30]) {
const [width, height] = size
return new AMap.Icon({
image: url,
size: new AMap.Size(width, height), // 图标所处区域大小
imageSize: new AMap.Size(width, height)
})
}
// 路径规划
function makeDriving() {
AMap.plugin('AMap.MoveAnimation', function () {
const lineArr = [
[116.478935, 39.997761],
[116.478939, 39.997825],
[116.478912, 39.998549],
[116.478912, 39.998549],
[116.478998, 39.998555],
[116.478998, 39.998555],
[116.479282, 39.99856],
[116.479658, 39.998528],
[116.480151, 39.998453],
[116.480784, 39.998302],
[116.480784, 39.998302],
[116.481149, 39.998184],
[116.481573, 39.997997],
[116.481863, 39.997846],
[116.482072, 39.997718],
[116.482362, 39.997718],
[116.483633, 39.998935],
[116.48367, 39.998968],
[116.484648, 39.999861]
]
map.setZoom(17)
const current = [116.480151, 39.998453] // 当前停在的位置
const start = lineArr[0] // 开始
const end = lineArr[lineArr.length - 1] // 终点
const startMarker = new AMap.Marker({
icon: setImgSize(
'https://a.amap.com/jsapi/static/image/plugin/marker/start.png'
),
position: start,
offset: [-13, -26]
})
const endMarker = new AMap.Marker({
icon: setImgSize(
'https://a.amap.com/jsapi/static/image/plugin/marker/end.png'
),
position: end,
offset: [-13, -26]
})
const passMarker = new AMap.Marker({
position: current,
icon: setImgSize(
'https://a.amap.com/jsapi/static/image/plugin/marker/mid.png'
),
offset: [-13, -26]
})
const carMarker = new AMap.Marker({
position: start,
icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
offset: [-13, -26]
})
// 绘制轨迹
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
showDir: true,
strokeColor: '#28F',
strokeWeight: 6
})
var passedPolyline = new AMap.Polyline({
map: map,
strokeColor: '#AF5',
strokeWeight: 6
})
carMarker.on('moving', function (e) {
const last = e.passedPath[e.passedPath.length - 1]
const { lng, lat } = last
const [a, b] = current
if (a == lng && b == lat) {
carMarker.stopMove()
} else {
passedPolyline.setPath(e.passedPath)
}
map.setCenter(e.target.getPosition(), true)
})
function startAnimation() {
carMarker.moveAlong(lineArr, {
duration: 500,
autoRotation: true
})
}
map.add([startMarker, endMarker, passMarker, carMarker])
setTimeout(() => {
startAnimation()
}, 600)
})
}

.amap-marker-label {
  border: none;
}
.amap-info-container {
  position: relative;
  .amap-info-window {
    background: #fff;
    border-radius: 3px;
    padding: 3px 7px;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
    position: relative;
  }
  .amap-info-sharp {
    position: absolute;
    top: 16px;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
  }
}