uniapp使用map显示多条polyline

参考链接：

• https://developers.weixin.qq.com/miniprogram/dev/component/map.html
• 微信开放社区问答

基础知识：

坐标系

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

微信小程序使用<map>

• api: wx.getLocation(Object object)  https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
• 地图相关使用的坐标格式应为 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.397470, //中心经度  
    scale: 12, //取值范围为3-20
    polyline: [
        {
            points: [{
                longitude: 113.3245211,
                latitude: 23.10229
            }, {
                longitude: 113.324520,
                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,
        // },
    ],
}

 微信文档参数解释如下：

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

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

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

 现在的效果如下

白色的就是箭头

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

polyline: [
    {
        points: [{
            longitude: 113.3245211,
            latitude: 23.10229
        }, {
            longitude: 113.324520,
            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,
    },
]

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