uni-app 中如何在 map 上绘制路线？

推荐答案

在 uni-app 中，可以通过使用 map 组件的 polyline 属性来绘制路线。以下是一个简单的示例代码：

// www.javascriptcn.com code example
<template>
  <view>
    <map
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :polyline="polyline"
      style="width: 100%; height: 300px;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.90923,
      longitude: 116.397428,
      markers: [],
      polyline: [
        {
          points: [
            { latitude: 39.90923, longitude: 116.397428 },
            { latitude: 39.90469, longitude: 116.407173 },
            { latitude: 39.90816, longitude: 116.416844 }
          ],
          color: '#FF0000DD',
          width: 2,
          dottedLine: false
        }
      ]
    };
  }
};
</script>

本题详细解读

1. map 组件的基本使用

map 组件是 uni-app 中用于显示地图的组件，支持在地图上添加标记点（markers）、绘制路线（polyline）等功能。

2. polyline 属性

polyline 属性用于在地图上绘制折线，通常用于表示路线。它是一个数组，数组中的每个元素都是一个对象，包含以下属性：

• points：折线的点集合，每个点包含 latitude 和 longitude 属性，表示该点的经纬度。
• color：折线的颜色，格式为 #RRGGBBAA，其中 AA 表示透明度。
• width：折线的宽度，单位为像素。
• dottedLine：是否使用虚线绘制折线，默认为 false。

3. 示例代码解析

在示例代码中，我们定义了一个 polyline 数组，其中包含一个折线对象。该折线由三个点组成，颜色为红色，宽度为 2 像素，且不使用虚线。

4. 注意事项

• polyline 中的点必须按照顺序排列，以确保路线绘制的正确性。
• map 组件的 latitude 和 longitude 属性用于设置地图的中心点，通常设置为路线的起点或中间点。
• markers 属性可以用于在地图上添加标记点，示例中未使用，但可以根据需要添加。

通过以上方法，你可以在 uni-app 的 map 组件上轻松绘制路线。