没有合适的资源?快使用搜索试试~ 我知道了~
首页微信小程序+腾讯地图开发实现路径规划绘制
微信小程序+腾讯地图开发实现路径规划绘制
16 下载量 191 浏览量
更新于2023-03-03
评论 4
收藏 70KB PDF 举报
主要介绍了微信小程序+腾讯地图开发实现路径规划绘制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
资源详情
资源评论
资源推荐
微信小程序微信小程序+腾讯地图开发实现路径规划绘制腾讯地图开发实现路径规划绘制
主要介绍了微信小程序+腾讯地图开发实现路径规划绘制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
学习学习吧
现象现象
我们想用微信小程序实现在map>组件上自定义显示导航路径,但是目前为止官方并未给出相应的方法实现,map>组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不
出一条路径的,
更糟糕的是即便你内置微信小程序JavaScript SDK,它目前为止也不能给你相应的返回导航路径中所有坐标集合方法实现,不信你看介绍
解决方案解决方案
那我们只能用WebService API咯,
但是不要高兴的太早,根据文档,我们要的接口参数是酱紫的
那么我们开始写(下面是菜鸡版代码,非礼勿视)
wx.request()参数的data部分对”from”/”to”赋值不能采用惯用手法了,你会发现换了好几种方式依然不能如意,要么请求参数非法,要么语法编译又过不了,没办法,最后只能使用绝招了
哼哼,状态稳如老狗 @_@
ok,到此为止,我们已经拿到我们想要的坐标集合了,那么接下来就是提取坐标数组,然后给polyline绘制的问题了
利用利用polyline绘制路径绘制路径
什么都不说了,直接上代码:
/**
* 获取当前位置标记在地图上并且利用polyline绘制路径
*/
now_LocationTap: function () {
var that = this
/**
* 初始化当前地图标记信息
*/
wx.getLocation({
type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
success: function (res) {
console.log('当前位置数据Object如下:')
console.log(res)
/** 开始同步数据 */
that.setData({
now_Location: {
latitude: res.latitude,
longitude: res.longitude,
},
/**初始化地图标记点附近车辆信息 */
markers: [
{
iconPath: '/resources/wait/car.png',
width: 70,
height: 70,
latitude: res.latitude,
longitude: res.longitude
}
]
})
console.log('当前latitude:' + res.latitude)
console.log('当前longitude:' + res.longitude)
console.log('当前latitude同步结果:' + that.data.now_Location.latitude)
console.log('当前longitude同步结果:' + that.data.now_Location.longitude)
/********************** 从腾讯地图WebService API请求导航路线坐标集合用于point_Array折线连接 */
var now_Location = String(res.latitude + ',' + res.longitude)
var end_Location = String(that.data.endLocation.latitude + ',' + that.data.endLocation.longitude)
wx.request({
url: 'https://apis.map.qq.com/ws/direction/v1/driving/', //连接接口地址
data: {
from: now_Location,
to: end_Location,
policy: 'REAL_TRAFFIC', //结合路况的最优方式
key: '腾讯地图KEY',
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data)
console.log('剩余距离:' + res.data.result.routes[0].distance + '米')
console.log('剩余时间:' + res.data.result.routes[0].duration + '分钟')
console.log('导航路线点串如下:')
console.log(res.data.result.routes[0].polyline)
/** 获取返回的方案路线坐标点串并解压 */
var coors = res.data.result.routes[0].polyline
for (var i = 2; i < coors.length; i++)
{ coors[i] = coors[i - 2] + coors[i] / 1000000 }
console.log('路线坐标点串解压完毕!')
console.log('路线坐标点串解压结果如下:')
console.log(coors);
/** 将解压后的坐标点串进行拼接成polyline想要的样子 */
var coors_new=[] //记住微信小程序声明一个数组这样写
for(var j = 0; j < coors.length; j++){
coors_new.push({
latitude: parseFloat(coors[j]),
longitude: parseFloat(coors[j+1])
})
j++;
}
/* 自己想的针对polyline的points做出的格式化方案,直接实现了目标对象的字符串形式,但是一开始没注意数据类型的问题,随后试了好几种方案都不如意,最终查看了高德地图的开发方案后恍然大悟,Array.push({latitude:'',longitude:''}),简直完美!
for (var i = 0, j = 0; i < coors.length - 2, j < coors.length/2; i++,j++)
{
coors[i] = String('{latitude:'+String(coors[i])+','+'longitude:'+String(coors[i + 1])+'}') ;
coors_new[j] = coors[i];
i+=1; //此处注意不+2的原因是:还有for循环的自动+1,结合起来就会达到跳2的效果
}
*/
console.log('路线坐标点串格式化完毕!')
console.log('路线坐标点串格式化结果如下:')
console.log(coors)
weixin_38625708
- 粉丝: 4
- 资源: 945
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- stc12c5a60s2 例程
- Android通过全局变量传递数据
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0