获取免费外卖分几步？（狗头保命）

如题，我承认我有“标题党”的嫌疑，但是我真的想吃一顿免费的中餐外卖啊啊啊，如果没有的话，晚点我再问问，腾讯位置服务开发应用征文大赛的奖品也可以呀~~，点击这里了解腾讯位置服务吧。

言归正传，话说——把大象装进冰箱拢共分几步？答：分三步，第一步先把冰箱门打开，第二部把大象装进去，第三步关上冰箱门欧耶。

先别丢番茄，正式内容开始了：

问：把外卖送到我这里拢共分几步？

答：也是三步：

1. 商家将我的订单信息写入数据库，并分配订单给骑手，然后准备我的单子商品；
2. 外卖小哥接到单子后快马加鞭回来取餐，然后根据订单信息，将商品按照订单上的地址送到我的手里；
3. 买家确认收货。

我们这里讨论的是其中的第二步，小哥配送途中的事情，假如一个小哥是新手，不熟路，那我们就在订单详情页面上面给小哥做一个路程规划，选择最优路线来帮买家送外卖。

实现的形式是以微信小程序，用的是腾讯位置服务提供的数据用来给小哥导航。

解题思路如下，写一个调用腾讯位置的服务端，再把接口提供给小程序调用，获得数据后，小程序将数据解析渲染到页面上，流程结束。

首先，找到核心的腾讯位置服务开发文档

一路浏览一遍，阅读开发文档是一个程序员必备的技能之一。

详细一点的，我们要有以下详细的接口：

1. ​ 地址解析（提供买家订单地址转换经纬度）
2. ​ 获取定位地址（获取当前的定位信息，主要是获取经纬度）
3. ​ 路线规划（从当前的位置前往目标地址）

申请腾讯key地址：点这里
登陆后个人中心创建应用，选择webService，然后填写自己服务器的域名或者ip。

为了方便后期的维护，这里使用的是PHP写的接口（PHP是世界上最好的语言）。

接着我们开始创建一个微信小程序的项目，项目选择JavaScript语言开发，不用云函数。

小程序的UI框架选择有赞团队的vant-weapp，小程序不校验合法域名。

我们先把大致框架画出来。

然后编写函数，主要有以下函数：

1. 目的地文字转经纬度信息（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
           })
         }
       })
     },
   

2. 获取当前地址的经纬度（getLocation）

   getLocation:function(e){
       var _this = this
       wx.getLocation({
         type: 'wgs84',
         success (res) {
           _this.setData({
             Now_address:res
           })
         }
        })
     },
   

3. 导航（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]})
      }
    })
  }

最终以文字框的形式展示，由于时间有限就不用地图展示了

完整代码。