【九月打卡】第5天 多端全栈项目实战

课程名称：多端全栈项目实战：商业级代驾全流程落地

课程章节：  华夏代驾全栈小程序实战

课程讲师： 神思者

课程内容：

    开通腾讯云地图 调用接口

 课程搜获：

    接着详细讲解下 腾讯api

        腾讯地图Direction API，提供多种交通方式的路线计算能力，包括：
     1. 驾车（driving）：支持结合实时路况、少收费、不走高速等多种偏好，精准预估到达时间（ETA）；
     2. 步行（walking）：基于步行路线规划。
     3. 骑行（bicycling）：基于自行车的骑行路线；
     4. 电动车（ebicycling）：基于电动自行车的骑行路线；
     5. 公交（transit）：支持公共汽车、地铁等多种公共交通工具的换乘方案计算；

    waypoints：返回途经点

 "waypoints":[
    {    
        "title":"无名道路",
      "location":{ 
          "lat":39.111094,
          "lng":116.111989
      }
    },
    {      
       "title":"无名道路",
       "location":{
             "lat":39.112073,
             "lng":116.112405
       }
    }
 ],

steps 路线步骤

"steps":[
     {   //第一阶段路线,起始位置，该阶段路线描述
         "instruction":"从起点朝东,沿东华门大街步行239米,直行进入东安门大街",
         "polyline_idx":[0,9],                   //路线在【路线坐标点串】数组中的下标0-9
         "road_name":"东华门大街",               //道路名称(非必有)
         "dir_desc":"东",                        //路线方向
         "distance":239,                         //路线距离（单位：米）
         "act_desc":"直行"                       //路线末尾动作（非必有）
       },
       {  //最终阶段路线
          "instruction":"步行255米,到达终点",
          "polyline_idx":[1556,1567],
          "road_name":"",
          "dir_desc":"东",
          "distance":255,
          "act_desc":""
        }]
}]

    乘客端 代码

    在手机上需调用   wx.startLocationUpdate 打开手机得定位

    wx.onLocationChange 开启试试变化

    

    小程序每次获得最新得gps位置后 都会执行一次wx.onLocationChange 之后就可以拿到最新得经纬度，

我们需要把这些数据传到后端地址，在这个时候 不要使用storage 因为在频繁得读写过程中 storage 会丢失数据

特别是我们每秒都进行gps定位，读写多次 必然会导致数据丢失

    在app.vue 页面编写 from to 进行存储gps定位值

    在小程序公众平台内 开头腾讯地图插件

    并且在mainfest.js 文件内引用 

    

    

    在页面内编写 起点地址和终点标签得点击事件回调 函数  chooseLocationHandle

 uni.navigateTo({
        url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${data}`
    });

    当用户选择好起点和终点后 小程序会自当返回我们得工作台 此时就需要用onshow 进行获取刚才选择得地址

onShow: function() {
    let location = chooseLocation.getLocation();

下一章写订单创建~