Android+SpringBoot+Vue+高德地圖實現后台查看車輛實時位置功能

場景

通過給車輛的駕駛員的手機安裝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對接，作為坐標信息的上傳接口。

然后前端請求后台獲取司機的坐標信息直接使用該表的查詢接口，司機的賬號作為查詢條件。

效果