場(chǎng)景

通過(guò)給車(chē)輛的駕駛員的手機(jī)安裝app,管理員在后臺(tái)可以實(shí)時(shí)查看車(chē)輛的實(shí)時(shí)位置。

實(shí)現(xiàn)思路：

app中集成高德地圖，app啟動(dòng)登錄后，定時(shí)地獲取當(dāng)前定位信息連同當(dāng)前賬號(hào)上傳到服務(wù)器后臺(tái)。

后臺(tái)將獲取的數(shù)據(jù)按照駕駛員的賬號(hào)為唯一性的標(biāo)識(shí)存入數(shù)據(jù)庫(kù)，如果之前數(shù)據(jù)庫(kù)沒(méi)有，則插入數(shù)據(jù)庫(kù)，如果之前有，則進(jìn)行更新。

然后前端頁(yè)面在獲取某個(gè)駕駛員的實(shí)時(shí)位置時(shí)，將駕駛員的賬號(hào)作為查詢條件去查詢坐標(biāo)，然后在前端頁(yè)面中的高德地圖上進(jìn)行顯示。

若依前后端分離版手把手教你本地搭建環(huán)境并運(yùn)行項(xiàng)目：

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

在上面的博客中將前后端的項(xiàng)目搭建并運(yùn)行成功。

APP中集成高德地圖實(shí)現(xiàn)定時(shí)上傳坐標(biāo)的功能自行實(shí)現(xiàn)。

Vue中集成高德地圖API實(shí)現(xiàn)定位與自定義樣式信息窗體：

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

然后前端Vue中實(shí)現(xiàn)根據(jù)坐標(biāo)定位顯示參照上面。

注：

博客主頁(yè)：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

首先設(shè)計(jì)定位信息的數(shù)據(jù)庫(kù)

?

然后使用代碼生成，針對(duì)此表生成代碼

若依前后端分離版怎樣根據(jù)數(shù)據(jù)庫(kù)生成代碼并快速實(shí)現(xiàn)某業(yè)務(wù)的增刪改查：

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

然后修改新增接口

??? @PostMapping("/insertOrUpdateCoordinate")@ApiOperation("更新司機(jī)車(chē)輛定位消息")public AjaxResult insertOrUpdateCoordinate(@RequestBody MqttVo mqttVo){return AjaxResult.success(busEmployeeCarCoordinateService.insertOrUpdateCoordinate(mqttVo));}

然后在方法實(shí)現(xiàn)中進(jìn)行邏輯判斷，如果之前沒(méi)有，則執(zhí)行插入，如果之前有則執(zhí)行更新。

把這個(gè)接口跟APP對(duì)接，作為坐標(biāo)信息的上傳接口。

然后前端請(qǐng)求后臺(tái)獲取司機(jī)的坐標(biāo)信息直接使用該表的查詢接口，司機(jī)的賬號(hào)作為查詢條件。

效果

?

?

總結(jié)

以上是生活随笔為你收集整理的Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。