uni-app map组件不能同时展示多条路线

在uni-app中，map组件确实在默认情况下不支持直接同时展示多条路线。不过，我们可以通过一些编程技巧来实现这一功能。主要思路是利用polyline组件多次绘制不同的路线。下面是一个简要的代码示例，展示如何在uni-app的map组件上同时展示多条路线。

首先，确保你的页面已经引入了map组件，并设置了必要的属性，如经纬度、缩放级别等。

<template>
  <view>
    <map
      id="map"
      longitude="{{longitude}}"
      latitude="{{latitude}}"
      scale="14"
      markers="{{markers}}"
      polylines="{{polylines}}"
      style="width: 100%; height: 500px;"
    ></map>
  </view>
</template>

然后，在页面的script部分，定义路线的坐标数据，并将其格式化为polyline组件所需的格式。

<script>
export default {
  data() {
    return {
      longitude: 116.404, // 默认中心点经度
      latitude: 39.915, // 默认中心点纬度
      markers: [], // 标记点，这里可以省略或根据需要添加
      polylines: [] // 路线数据
    };
  },
  onLoad() {
    this.initPolylines();
  },
  methods: {
    initPolylines() {
      // 示例路线数据，可以根据实际情况调整
      const route1 = [
        { latitude: 39.915, longitude: 116.404 },
        { latitude: 39.900, longitude: 116.430 },
        // 更多点...
      ];
      const route2 = [
        { latitude: 39.915, longitude: 116.404 },
        { latitude: 39.920, longitude: 116.380 },
        // 更多点...
      ];

      // 格式化为polylines所需的格式
      this.polylines = [
        {
          points: route1,
          color: "#FF0000DD", // 红色，半透明
          width: 4,
          dottedLine: false
        },
        {
          points: route2,
          color: "#0000FFDD", // 蓝色，半透明
          width: 4,
          dottedLine: false
        }
      ];
    }
  }
};
</script>

在这个例子中，我们定义了两条路线route1和route2，并将它们格式化为polylines数组所需的对象格式。每个对象包含points（路线坐标点数组）、color（路线颜色）、width（路线宽度）和dottedLine（是否虚线）等属性。

通过这种方式，你可以在uni-app的map组件上同时展示多条路线。当然，这只是一个基础示例，实际应用中你可能需要根据具体需求调整路线数据、样式等。