Java教程

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

本文主要是介绍【九月打卡】第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 文件内引用 

    

    https://img1.sycdn.imooc.com/631ab2c10001888403920230.jpg

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

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


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


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


下一章写订单创建~


https://img3.sycdn.imooc.com/631aae380001c0d409000505.jpg

这篇关于【九月打卡】第5天 多端全栈项目实战的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!