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

 博主介绍:本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮助到您;

🍅希望此文章可以帮助到您🍅

目录

原理说明:

一、布局文件:

二、js文件:

三、留个脚印吧


原理说明:

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

一、布局文件:

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

三、留个脚印吧

大家要是感觉此篇文章有意义;那就给个关注、点赞,收藏吧;

🍅也可以关注文档末尾公众号🍅

 

  • 2
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Android毕业设计源码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值