微信小程序绘制地图轨迹线路

绘制轨迹的话需要拿到坐标点，获取到坐标点之后再地图上进行绘制就可以；

布局文件：

  <map class="mapUI" id="myMap" markers="{ {markers}}" latitude="{ {latitude}}" longitude="{ {longitude}}" polyline="{ {polyline}}" include-points='{ {points}}' covers="{ {covers}}"  scale="13"></map>

js文件：

在实现轨迹绘制的时候需要的数据

1：起点的坐标数据和icon

2：终点的坐标数据和icon

3：绘制线路的坐标数据集合

实现代码：

  thatInfor.setData({

                    markers: [
                        {
                            latitude: startEnd.Lat,
                            longitude: startEnd.Lon,
                            id: 20,
                            iconPath: '../../image/mocar.png',
                            width: '40px',
                            height: '60px',
                            anchor: {
                                x: 0.5,
                                y: 0.4
                            }
                        }, {
                            id: 1,
                            latitude: startEnd.Lat,
                            longitude: startEnd.Lon,
                            name: "起点",
                            iconPath: '../../image/icon_start.png',
                            content: "111",
                            width: '25px',
                            height: '40px',
                        },
                        {
                            id: 2,
                            latitude: endModel.Lat,
                            longitude: endModel.Lon,
                            name: "终点",
                            iconPath: '../../image/icon_end.png',
                            width: '25px',
                            height: '40px',
                        }
                    ],

                    polyline: [{
                        points: pointinfor,
                        color: '#40ac44',
                        width: 5,
                        dottedLine: false,
                        arrowLine: true,
                        borderWidth: 2,
                    }],


                })

//地图绘制
    var mapCtx = wx.createMapContext("myMap");
                mapCtx.includePoints({
                    points: pointinfor
                })