如题,我承认我有“标题党”的嫌疑,但是我真的想吃一顿免费的中餐外卖啊啊啊,如果没有的话,晚点我再问问,腾讯位置服务开发应用征文大赛的奖品也可以呀~~,点击这里了解腾讯位置服务吧。
言归正传,话说——把大象装进冰箱拢共分几步?答:分三步,第一步先把冰箱门打开,第二部把大象装进去,第三步关上冰箱门欧耶。
先别丢番茄,正式内容开始了:
问:把外卖送到我这里拢共分几步?
答:也是三步:
- 商家将我的订单信息写入数据库,并分配订单给骑手,然后准备我的单子商品;
- 外卖小哥接到单子后快马加鞭回来取餐,然后根据订单信息,将商品按照订单上的地址送到我的手里;
- 买家确认收货。
我们这里讨论的是其中的第二步,小哥配送途中的事情,假如一个小哥是新手,不熟路,那我们就在订单详情页面上面给小哥做一个路程规划,选择最优路线来帮买家送外卖。
实现的形式是以微信小程序,用的是腾讯位置服务提供的数据用来给小哥导航。
解题思路如下,写一个调用腾讯位置的服务端,再把接口提供给小程序调用,获得数据后,小程序将数据解析渲染到页面上,流程结束。
首先,找到核心的腾讯位置服务开发文档
一路浏览一遍,阅读开发文档是一个程序员必备的技能之一。
详细一点的,我们要有以下详细的接口:
- 地址解析(提供买家订单地址转换经纬度)
- 获取定位地址(获取当前的定位信息,主要是获取经纬度)
- 路线规划(从当前的位置前往目标地址)
申请腾讯key地址:点这里
登陆后个人中心创建应用,选择webService,然后填写自己服务器的域名或者ip。
为了方便后期的维护,这里使用的是PHP写的接口(PHP是世界上最好的语言)。
接着我们开始创建一个微信小程序的项目,项目选择JavaScript语言开发,不用云函数。
小程序的UI框架选择有赞团队的vant-weapp,小程序不校验合法域名。
我们先把大致框架画出来。
然后编写函数,主要有以下函数:
-
目的地文字转经纬度信息(address2lnglat)
address2lnglat:function(address){ var _this = this wx.request({ url: 'https://localhost/api/address2lnglat', method:'GET', data:{address:address,format:'json'}, success:function(res){ _this.setData({ Obj_address:res }) } }) },
-
获取当前地址的经纬度(getLocation)
getLocation:function(e){ var _this = this wx.getLocation({ type: 'wgs84', success (res) { _this.setData({ Now_address:res }) } }) },
-
导航(navigation)
navigation:function(e){
var _this = this
var from = this.data.Now_address.latitude +','+this.data.Now_address.longitude
var to = this.data.Obj_address.data.lat + ',' + this.data.Obj_address.data.lng
wx.request({
url: 'https://localhost/api/navigation',
method:'GET',
data:{from:from,to:to},
success:function(res){
console.log(res)
console.log(res.data.result.routes[0].steps) _this.setData({steps:res.data.result.routes[0].steps,info:res.data.result.routes[0]})
}
})
}
最终以文字框的形式展示,由于时间有限就不用地图展示了
完整代码。