Scenes
By installing an app on the mobile phone of the driver of the vehicle, the administrator can view the real-time location of the vehicle in real time in the background.
Realization ideas:
AutoNavi Map is integrated in the app. After the app is started and logged in, it will periodically obtain the current location information and upload it to the server background along with the current account.
The background will store the acquired data in the database according to the driver's account as a unique identifier. If the database does not exist before, it will be inserted into the database, and if there has been before, it will be updated.
Then, when the front-end page obtains the real-time location of a driver, it uses the driver's account as the query condition to query the coordinates, and then displays it on the Gaode map in the front-end page.
If you follow the front-end and back-end separated version to teach you how to set up the environment locally and run the project:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
In the above blog, the front-end and back-end projects are built and run successfully.
The function of integrating AutoNavi map in the APP to realize the function of uploading coordinates regularly is realized by itself.
Vue integrates AutoNavi Map API to realize positioning and custom style information form:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114162130
Then the front-end Vue realizes the display according to the coordinate positioning and the reference above.
Note:
Blog homepage:
https://blog.csdn.net/badao_liumang_qizhi
Follow the public
account Domineering
programmers Get programming-related e-books, tutorial pushes and free downloads.
achieve
First design a database of positioning information
Then use code generation to generate code for this table
How to generate code based on the database based on the front-end and back-end separated version and quickly realize the addition, deletion, modification, and inspection of a certain business:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108316087
Then modify the new interface
@PostMapping("/insertOrUpdateCoordinate")
@ApiOperation("更新司机车辆定位消息")
public AjaxResult insertOrUpdateCoordinate(@RequestBody MqttVo mqttVo){
return AjaxResult.success(busEmployeeCarCoordinateService.insertOrUpdateCoordinate(mqttVo));
}Then make a logical judgment in the method implementation, if there is no before, execute the insert, if there is before, execute the update.
Connect this interface with the APP as an upload interface for coordinate information.
Then the front-end requests the back-end to obtain the driver's coordinate information and directly uses the query interface of the table, and the driver's account number is used as the query condition.
effect
