功能要求订单详情实现绘制物流轨迹，使用的是微信自带的地图组件map
具体参数可参考官方地址：微信map官方文档链接

在开发过程中我主要用到了
markers：用于标记特殊位置(出发地，目的地，进行地)
polyline：用来绘制路线图

废话不多说，直接上效果图

代码如下

<template>
  <div class="container">
    <map
      id="myMap"
      scale="14"
      style="width: 100%; height: 100vh"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :polyline="polyline"
      show-location
    ></map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.918823,
      longitude: 116.407470,
      markers: [{
        id: 1,
        latitude: 39.908823,
        longitude: 116.397470,
        iconPath: 'https://wsb2c-vip.oss-cn-hangzhou.aliyuncs.com/2025/map/store.png',
        width: 50, // 原始宽度
        height: 50, // 原始高度
      },
        {
          id: 2,
          latitude: 39.918823,
          longitude: 116.407470,
          iconPath: 'https://wsb2c-vip.oss-cn-hangzhou.aliyuncs.com/2025/map/location.png',
          width: 50, // 原始宽度
          height: 50, // 原始高度
        },
        {
          id: 3,
          latitude: 39.918780,
          longitude: 116.397480,
          iconPath: 'https://wsb2c-vip.oss-cn-hangzhou.aliyuncs.com/2025/map/rider.png',
          width: 50, // 原始宽度
          height: 50, // 原始高度
        }],
      polyline: [{
        points: [
          {latitude: 39.908823, longitude: 116.397470},
          {latitude: 39.918780, longitude: 116.397480},
          {latitude: 39.918823, longitude: 116.407470}
        ],
        color: "#FF0000",
        borderColor: "#000",
        borderWidth: 1,
        width: 3,
        dottedLine: false
      }]
    }
  },
  mounted() {
    // 获取当前位置
    // wx.getLocation({
    //   type: 'gcj02',
    //   success: (res) => {
    //     this.latitude = res.latitude
    //     this.longitude = res.longitude
    //   }
    // })
  }
}
</script>

希望对大家有所帮助～❤️

———————————————————————————————————
如果是使用高德地图，我感觉这位女士写的不错，大家可以借鉴一下
链接：https://www.cnblogs.com/moranjl/p/18773404