場景
通過給車輛的駕駛員的手機安裝app,管理者在背景可以實時檢視車輛的實時位置。
實作思路:
app中內建高德地圖,app啟動登入後,定時地擷取目前定位資訊連同目前賬号上傳到伺服器背景。
背景将擷取的資料按照駕駛員的賬号為唯一性的辨別存入資料庫,如果之前資料庫沒有,則插入資料庫,如果之前有,則進行更新。
然後前端頁面在擷取某個駕駛員的實時位置時,将駕駛員的賬号作為查詢條件去查詢坐标,然後在前端頁面中的高德地圖上進行顯示。
若依前後端分離版手把手教你本地搭建環境并運作項目:
在上面的部落格中将前後端的項目搭建并運作成功。
APP中內建高德地圖實作定時上傳坐标的功能自行實作。
Vue中內建高德地圖API實作定位與自定義樣式資訊窗體:
然後前端Vue中實作根據坐标定位顯示參照上面。
實作
首先設計定位資訊的資料庫
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLi0zaHRGcWdUYuVzVa9GczoVdG1mWfVGc5RHLwkzX39GZhh2csATMflHLwEzX4xSZz91ZsADMx8FdsYkRGZkRG9lcvx2bjxSa2EWNhJTW1AlUxEFeVRUUfRHelRHL2EzXlpXazxyayFWbyVGdhd3LcV2Zh1Wa9M3clN2byBXLzN3btg3PnVGcq5yMiZWMiZTNyYWMzMTNwUWYkVzYxYTOxkTMkhTMzIWZl9CX3AzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL3M3Lc9CX6MHc0RHaiojIsJye.jpeg)
然後使用代碼生成,針對此表生成代碼
若依前後端分離版怎樣根據資料庫生成代碼并快速實作某業務的增删改查:
javascript:void(0)
然後修改新增接口
@PostMapping("/insertOrUpdateCoordinate")
@ApiOperation("更新司機車輛定位消息")
public AjaxResult insertOrUpdateCoordinate(@RequestBody MqttVo mqttVo){
return AjaxResult.success(busEmployeeCarCoordinateService.insertOrUpdateCoordinate(mqttVo));
}
然後在方法實作中進行邏輯判斷,如果之前沒有,則執行插入,如果之前有則執行更新。
把這個接口跟APP對接,作為坐标資訊的上傳接口。
然後前端請求背景擷取司機的坐标資訊直接使用該表的查詢接口,司機的賬号作為查詢條件。