惊蛰

外观

uniapp使用map显示多条polyline

约 536 字大约 2 分钟

2025-07-04

相关信息

  • map
  • 微信开放社区问答

基础知识

坐标系

  • wgs-84:地球坐标系（国际通用）--- gps
  • gcj02:火星坐标系（wgs84 加密）国内必须用加密后的坐标
  • bd09:百度坐标系（百度地图使用）
  • wgs-84 和 gcj02 之间可以用 java 代码转换。

微信小程序使用 <map>

  • api: wx.getLocation(Object object)
  • 地图相关使用的坐标格式应为 gcj02。
  • 若使用该接口，需要在 app.json 中进行声明，否则将无法正常使用该接口
  • 使用前还需要先通过类目审核，再在小程序管理后台，「开发」-「开发管理」-「接口设置」中自助开通该接口权限。

提示

  • 经度（竖）：0~180°
  • 纬度（横）：0~90°

实际 api 中使用的参数通常是（纬度，经度）而不是先经度后纬度。

布局代码

<map
  id="myMap"
  :latitude="myLatitude"
  :longitude="myLongitude"
  :scale="scale"
  :polyline="polyline"
  show-location
  :include-points="polyline[0].points"
></map>

最重要的参数是 polyline 和 include-points

return {
  // 39.908823,116.397470(北京)
  myLatitude: 39.908823, //中心纬度
  myLongitude: 116.39747, //中心经度
  scale: 12, //取值范围为3-20
  polyline: [
    {
      points: [
        {
          longitude: 113.3245211,
          latitude: 23.10229,
        },
        {
          longitude: 113.32452,
          latitude: 23.21229,
        },
      ],
      color: "#FF0000",
      width: 5,
      arrowLine: true,
    },
    // {
    //     points: [{
    //         longitude: 113.3255211,
    //         latitude: 23.10229
    //     }, {
    //         longitude: 113.325520,
    //         latitude: 23.21229
    //     }],
    //     color: "#0000ff",
    //     width: 5,
    //     arrowLine: true,
    // },
  ],
};

微信文档参数解释

alt text

alt text

polyline 是数组，有一条路线就增加一个{ }，对象属性有 points, color, width, arrowLine

points 也是一个数组，多个坐标点放在这个数组里，arrowLine 负责箭头显示与否。

alt text

提示

include-points 也是数组，以上图为例，include-points 绑定的数据应该是 polyline[0].points 。直接绑定 polyline 没有效果。

效果如下

alt text

白色的就是箭头

alt text

如果要显示多条路线，在 polyline 里增加新的对象

polyline: [
  {
    points: [
      {
        longitude: 113.3245211,
        latitude: 23.10229,
      },
      {
        longitude: 113.32452,
        latitude: 23.21229,
      },
    ],
    color: "#FF0000",
    width: 5,
    arrowLine: true,
  },
  {
    points: [
      {
        longitude: 113.3255211,
        latitude: 23.10229,
      },
      {
        longitude: 113.32552,
        latitude: 23.21229,
      },
    ],
    color: "#0000ff",
    width: 5,
    arrowLine: true,
  },
];

显示效果如下（因为两条路径坐标一样，所以路径一样）：

alt text