场景

通过给车辆的驾驶员的手机安装app,管理员在后台可以实时查看车辆的实时位置。

实现思路：

app中集成高德地图，app启动登录后，定时地获取当前定位信息连同当前账号上传到服务器后台。

后台将获取的数据按照驾驶员的账号为唯一性的标识存入数据库，如果之前数据库没有，则插入数据库，如果之前有，则进行更新。

然后前端页面在获取某个驾驶员的实时位置时，将驾驶员的账号作为查询条件去查询坐标，然后在前端页面中的高德地图上进行显示。

若依前后端分离版手把手教你本地搭建环境并运行项目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

在上面的博客中将前后端的项目搭建并运行成功。

APP中集成高德地图实现定时上传坐标的功能自行实现。

Vue中集成高德地图API实现定位与自定义样式信息窗体：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114162130

然后前端Vue中实现根据坐标定位显示参照上面。

注：

博客主页：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先设计定位信息的数据库

然后使用代码生成，针对此表生成代码

若依前后端分离版怎样根据数据库生成代码并快速实现某业务的增删改查：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108316087

然后修改新增接口

    @PostMapping("/insertOrUpdateCoordinate")@ApiOperation("更新司机车辆定位消息")public AjaxResult insertOrUpdateCoordinate(@RequestBody MqttVo mqttVo){return AjaxResult.success(busEmployeeCarCoordinateService.insertOrUpdateCoordinate(mqttVo));}

然后在方法实现中进行逻辑判断，如果之前没有，则执行插入，如果之前有则执行更新。

把这个接口跟APP对接，作为坐标信息的上传接口。

然后前端请求后台获取司机的坐标信息直接使用该表的查询接口，司机的账号作为查询条件。

效果

Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能相关推荐

高德地图实现仿qq,微信发送位置功能实现逻辑
定位获取当前位置地图中间放置大头针周边展示位置信息周边信息点击后的逻辑操作地图截屏功能实现发送图片到其他页面或者服务器获取到信息进行展示写的不好,勿喷,有疑问可以联系我qq 130888 ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
Android中集成高德地图SDK实现地图定位和导航功能（二）
我们接着上一篇文章开始继续实现android中集成高德地图的SDK实现地图定位,搜索,导航的功能如何让地图在手机上实现呢? 1.配置AndroidManifest 中的权限申请可以参考官方文档 ...
基于SpringBoot+VUE的宠物医院后台管理系统【源码开源】【建议收藏】
基于SpringBoot+VUE的宠物医院后台管理系统[源码开源][建议收藏] 今天给大家开源一个基于SpringBoot+VUE的宠物医院后台管理系统,系统基于脚手架工程,花了大概1周时间做出来的. ...
Vue 高德地图 js API Loca 如何使用连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用连接线图层.脉冲连线图层阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式已经了解如何载入 Loca 插件如果不了解,可以查看我之 ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
android开发之高德地图不能定位，只显示格子
android 在引用高德地图组件进行开发的时候,不能定位,只显示格子,如下图所示: 参考了网上的一下大家的解决方案,主要是 (1)检查申请的KEY是否正确.PS:申请方法请参考这篇博客,写的很全很详 ...

Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能

场景

实现

效果

Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能相关推荐

最新文章

热门文章