vue 3.0高德地图【marker点击显示驾车路线规划】

  <div id="my-panel"></div>
  <div id="container"></div>

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,
    animateEnable: true
  })
  let markers = []
  // marker 制作
  function makeMarker({ lnglat, city, number }) {
    const marker = new AMap.Marker({
      position: lnglat
    })
    const content = `
    <div class="amap-info-container">
        <div class="amap-info-window">${city}仓 ${number}</div>
        <div class="amap-info-sharp"></div>
    </div>`
    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 makeDriving() {
    const position = [116.379028, 39.885042]
    const marker = new AMap.Marker({
      map: map,
      position,
      icon: 'https://webapi.amap.com/images/car.png',
      offset: new AMap.Pixel(-26, -13),
      autoRotation: true,
      angle: -90
    })
    map.plugin('AMap.Driving', function () {
      var driving = new AMap.Driving({
        policy: 0,
        map: map,
        panel: 'my-panel'
      })
      driving.search(
        [116.379028, 39.865042],
        [116.427281, 39.903719],
        {
          waypoints: [position]
        },
        function (status, result) {}
      )
      // 搜索完成后，将自动绘制路线到地图上
    })
    map.add(marker)
    map.setFitView()
  }

#my-panel {
  width: 380px;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fff;
  z-index: 99;
}

.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;
  }
}