为Google Maps JS实例构建实时标记追踪系统需掌握哪些技术？

技术可行性确认 #

你提到的几个疑问先明确结论：

• 不需要开发安卓/iOS原生应用，全部功能用Google Maps JavaScript API就能实现
• Google Maps JS完全支持动态添加、更新实时位置标记，也支持绘制预设路线和移动轨迹
• 多设备位置广播不需要依赖Google提供的能力，自己加个极简单的后端中转即可，你已掌握的技术栈完全可以实现

整体架构逻辑 #

整套系统分三个极简模块，没有复杂依赖：

• 车载上报端：每辆消防车的执勤人员用手机浏览器打开即可，调用手机自带的定位能力，每隔10秒把当前车辆的位置、车辆ID上传到后端
• 轻量后端：用你熟悉的Python开发，仅需2个接口，存储所有车辆的最新位置数据，响应前端的位置拉取请求
• 公众查看端：就是你需要的9个地图页面，每隔10秒从后端拉取最新位置，更新地图上的标记即可

落地实现步骤 #

1. 后端开发（代码量<50行） #

用Flask框架开发即可，核心仅需2个接口：

• 位置上报接口：@app.route('/upload_location', methods=['POST'])，接收车辆ID、经纬度、时间戳，存在Sqlite或者直接存在内存字典里就行，不需要复杂数据库
• 位置拉取接口：@app.route('/get_locations', methods=['GET'])，返回所有车辆的最新位置数据

2. 车载上报页开发（单HTML文件） #

也是纯HTML+JS实现：

• 页面加下拉选择框，供上车的人员选择对应的车辆ID和预设路线
• 调用浏览器Geolocation API获取当前手机位置，自动定时调用后端上报接口上传位置
• 不需要安装任何APP，手机浏览器打开页面、授予定位权限即可使用

3. 公众查看页开发（9个页面复用同一套代码） #

• 单车辆追踪页：页面传入车辆ID参数，只拉取对应车辆的位置数据，在地图上绘制该车辆的预设路线，每隔10秒更新地图上的车辆标记坐标，同时把历史位置点连起来形成移动轨迹
• 全量整合页：拉取所有8辆车的位置数据，用不同颜色的标记和路线做区分，供家长判断哪辆车距离自己更近
• 所有页面都可以直接用你熟悉的JQuery、HTML/CSS开发，不需要额外学习新框架

部署建议 #

• 所有前端页面可以直接托管在任意静态页面服务上，不需要服务器资源
• 后端服务可以用任意免费Python托管平台部署，不需要额外付费
• 巡游当天仅需每辆车上有一位人员保持上报页处于打开状态、手机网络畅通即可，不需要额外采购专业定位设备

内容的提问来源于stack exchange，提问作者MrMadium