给地图加上自定义封面图与路线：wechat-weapp-mapdemo之covers与polyline完全指南
【免费下载链接】wechat-weapp-mapdemo微信小程序开发mapdemo，地图导航、marker标注项目地址: https://gitcode.com/gh_mirrors/we/wechat-weapp-mapdemo
wechat-weapp-mapdemo 是一个开源的微信小程序地图开发 Demo，覆盖地图导航、marker 标注等核心场景。本文将带你用 10 分钟快速上手两大高频进阶特性：用covers 给地图添加自定义封面图、用polyline 绘制路线，从 Demo 运行到参数避坑一次讲清。
30 秒理解：covers 与 polyline 是什么？
在微信<map>组件中，这两组属性是地图“装修”的主力：
| 属性 | 作用 | 典型场景 |
|---|---|---|
covers | 在地图指定经纬度位置叠加自定义图片（封面），可旋转 | 店铺招牌图、活动海报、方向指示 |
polyline | 在地图上绘制一段折线路线，可控制颜色、宽度、是否虚线 | 骑行/步行路线、配送路径、区域边界 |
一句话区分：covers 是“贴图片”，polyline 是“画路线”，两者都基于经纬度定位，互相独立、可以叠加使用。
快速运行 wechat-weapp-mapdemo 地图 Demo
第 1 步：获取项目源码
git clone https://gitcode.com/gh_mirrors/we/wechat-weapp-mapdemo第 2 步：打开微信开发者工具，选择「导入项目」，选择克隆下来的目录即可，无需 npm install。
第 3 步：熟悉页面结构。四个页面各司其职，本文涉及的就是后两个：
- pages/location/location.js：「导航」页，演示
covers封面图与wx.openLocation路线导航 - pages/map/map.js：「地图」页，演示 markers 批量标注与
polyline路线数据结构
如何用 covers 给地图添加自定义封面图（3 步搞定）
第 1 步：准备图片。把封面图放入小程序本地目录（如image/），iconPath使用相对路径引用。
第 2 步：在页面 data 中定义 covers 数组。参考 pages/location/location.js 中的写法：
covers: [{ latitude: 23.099794, longitude: 113.324520, iconPath: '../../images/wechart.png', rotate: 10 }, { latitude: 23.099298, longitude: 113.324129, iconPath: '../../images/wechart.png', rotate: 90 }]每个封面对象支持 4 个常用字段：
latitude/longitude：封面图锚点经纬度iconPath：图片路径（本地相对路径即可）rotate：顺时针旋转角度（0–360），第二个封面就旋转了 90°，直观展示效果
第 3 步：绑定到 map 组件。打开 pages/location/location.wxml，关键只有一处：
<map ... markers="{{markers}}" covers="{{covers}}" scale="16"></map>把covers="{{covers}}"加到<map>标签上，图片就会精准“钉”在指定坐标上，缩放地图时图片始终锚定原地。
💡 小技巧：
rotate很适合做“指向箭头”式封面，配合不同旋转角度形成方向指示。
如何用 polyline 在地图上绘制自定义路线（3 步搞定）
第 1 步：准备坐标点。polyline 需要一串坐标点，顺序即连线顺序。可以来自接口、用户轨迹，或手写固定点。
第 2 步：定义 polyline 数组。pages/map/map.js 中保留了官方示例的数据结构（当前被注释，取消注释即可生效）：
polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.324520, latitude: 23.21229 }], color: "#FF0000DD", width: 2, dottedLine: true }]4 个核心参数速查：
points：坐标点数组，至少 2 个点才能连线color：线条颜色，支持带透明度的 8 位色值（如#FF0000DD）width：线宽（像素），推荐 2–5dottedLine：是否绘制虚线，true常用于规划中的路线
第 3 步：绑定到 map 组件。在 pages/map/map.wxml 的<map>标签上追加polyline="{{polyline}}"即可，与 markers、covers 同时生效互不冲突。
如上图，配合wx.openLocation还能调起完整导航页：起点、终点、多方案路线与耗时距离一应俱全，适合“查路线 + 一键导航”组合玩法。
新手常见 5 个踩坑清单
- 坐标系要用 gcj02：Demo 中
wx.getLocation指定type: 'gcj02'，否则路线会整体偏移数百米。 - iconPath 路径别写错：cover 图片建议用相对页面或根目录的相对路径，路径错误时图片静默不显示，控制台无报错。
- points 顺序即路线方向：坐标点按“从起点到终点”排列，顺序乱了路线会来回折返。
- 颜色带透明度才好看：
#FF0000DD这类 8 位色值能让路线半透明，不遮挡底图道路信息。 - scale 影响观察效果：演示页用
scale="16"近距离查看 covers，用scale="5"看全览路线，调试时多切换缩放级别。
小结
wechat-weapp-mapdemo 用最少的代码演示了微信地图的两个高频能力：covers负责在任意坐标叠加可旋转的自定义封面图，polyline负责绘制可控制颜色、宽度与虚线的路线。两个特性都只需「data 里定义数组 → map 标签上绑定属性」两步，配合 pages/location/location.json、app.json 中的页面配置，即可快速搭出导航标注类小程序。建议动手把 map.js 中注释的 polyline 打开，跑通你自己的第一条路线 🗺️
【免费下载链接】wechat-weapp-mapdemo微信小程序开发mapdemo，地图导航、marker标注项目地址: https://gitcode.com/gh_mirrors/we/wechat-weapp-mapdemo
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
