首页 前端知识 使用Vue并接入百度地图实现获取两位置之间距离和驾车时间的搬家预约系统的实现

使用Vue并接入百度地图实现获取两位置之间距离和驾车时间的搬家预约系统的实现

2024-05-06 09:05:24 前端知识 前端哥 669 537 我要收藏

【话在前头】

本项目使用SpringBoot+Vue并调用百度地图JsAPI和服务器端API进行实现。

先摆张效果图(dog)        

一、系统需求简介

        用户填写起点、终点、预约时间、需要车型大小等【数据表单】后点击发布。系统按照一定【规则】匹配司机并进行【数据处理】推荐给用户。

        【相关规则】要求如下:

        1.司机是否空闲。

        2.根据起点位置随机增加坐标数值模拟司机坐标并判断能否在预约时间内赶到目的地。

        3.司机的车型是否符合大小。

        4.司机符合大小的车型的限号时间是否与预约时间冲突。

二、开发思路剖析

      2.1数据表单剖析

        明面上用户只提交了起点、终点等数据,但是这些数据仍需进行处理方可提交至后台。比如我们需要将用户输入的起点名称、终点名称转换为坐标以及通过坐标算出两位置的距离和驾驶时间便于后台进行一个价格的设置。

        如何解决?方法之一:引入百度地图并调用百度地图API获取相关数据。

        1.首先。我们需要先成为百度地图的开发者,相关注册见百度地图开放平台。

        2.在前端vue项目中引入百度地图。在目录public下的index.html中引入Js百度API。

<script type="text/javascript" 
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你申请的JsAPI密钥">

        3.调用JsAPI将起点、终点名称转换为坐标并获取相关数据。

        这里并不演示如何显示百度地图,相关案例见官网案例解释 ,html、js操作可根据下面的代码参考实现vue代码的转换。   

        言归正传。我们在用户填写表单页面中在用户输入完起点、终点后分别触发方法进行坐标的转换和获取相关数据:

 //在methods下写一个起点地址解析成坐标的方法,在用户输入完起点后触发
    addressResolution(){
      var _that = this
      //创建地址解析器实例
      var myGeo = new BMapGL.Geocoder();
      // 将地址解析结果显示在地图上,并调整地图视野、
      myGeo.getPoint(this.form.address, function(point){
        if(point){
           //数据表单接收回传的出发的经纬度坐标
          _that.form.addressLongitude  = point.lng
          _that.form.addressDimension  = point.lat
        }else{
          alert('您选择的地址没有解析到结果!');
        }
         //此处的xx市要输入某一个范围 比如北京市
      }, 'xx市')

    },
  //目的地址解析成坐标
    toAddressResolution(){
      var _that = this
      //创建地址解析器实例
      var myGeo = new BMapGL.Geocoder();
      myGeo.getPoint(_that.form.toAddress, function(point){
        if(point){
          _that.form.toAddressLongitude  = point.lng
          _that.form.toAddressDimension  = point.lat
        }else{
          alert('您选择的地址没有解析到结果!');
        }
      }, 'xx市')
    },

        !!!最重要一步调用JsAPI携带起点、终点坐标获取距离、驾车时间等数据。

   //获取距离-时间 四个参数分别是 起点经纬度、终点经纬度
    getMap(addlng,addlat,tolng,tolat){
      var _that = this
      var searchComplete = function (results){
        if (transit.getStatus() != BMAP_STATUS_SUCCESS){
          return ;
        }
        var plan = results.getPlan(0);
        //获取路程距离
        _that.form.distance = plan.getDistance(true);
        //获取路程时间
        _that.form.travelTime = plan.getDuration(true);
      }
   }

        本人前端经数据处理后发送后台的数据如下:

      2.2后台匹配司机相关规则思路剖析

        此处使用伪代码进行解释:

1.查出空闲的司机

2.根据起点坐标,然后随机增加一定值模拟司机坐标

  --调用百度服务器端API发送请求(此处需要封装AK类,详细见
   https://lbsyun.baidu.com/faq/api?title=webapi/guide/webservice-lwrouteplanapi/dirve)

  --根据返回的请求获取司机离起点的距离和时间

  --判断司机到达起点所需的时间 是否小于预约时间-当前时间

  --将时间和距离数据插入司机相关属性中

  --返回筛选后的司机

3.将司机所拥有的车型与所需车型对比
  
  --再判断预约的时间是否在该车型限号的时间内

     2.3司机数据处理剖析

        此处也是用伪代码进行解释

1.根据司机到起点的距离和起点到终点的距离 * 你设定的每公里价格设置司机报价

2.根据司机的评分进行降序排列

3.返回前端司机数据

三、实现效果图


【话在后头】

  有相关项目定制要求的朋友可私信博主或者点击下面的信息找博主

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7148.html
标签
百度
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!