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

Posted 2023-04-05 Android毕业设计源码

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

布局文件：

  <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
                )

【小程序】地图｜绘制GPX轨迹

参考技术A

根据导出的GPX文件，在地图上绘制其路径轨迹。

GPX: the GPS Exchange Format

GPX (GPS交换格式)是一种轻量级XML数据格式，用于在互联网上的应用程序和Web服务之间交换GPS数据(路径、路由和跟踪)。

在线XML转JSON - BeJSON
为了方便后续绑定使用，转换后批量将“lat”替换为“latitude”、“lon”替换为“longitude”。

将转换后的JSON文件部署到本地服务器，先进行本地测试。
通过 wx.request 获取数据： 微信小程序通过api接口将json数据展现到小程序示例

使用本地链接进行测试会报错，需要将项目设置里勾选上“不校验...”： 【微信小程序】 微信小程序连接本地接口

本地测试没问题后，将文件部署到外网环境，改下url就可以了。

由于数据格式已经与小程序要求的一致了，直接将其赋给对应的Key即可。

需要注意的是，在 wx.request 回调里直接使用 this.setData 会报错： 微信小程序中this指向作用域问题this.setData is not a function报错 。

至此，已基本满足预研需求，后续开发具体功能时会方便不少啦 ~ O(∩_∩)O ~
如果能够显示 卫星地图 就完美了，不过还没找到好的解决方案，留作另一个问题吧，TX不开放也没办法了。