今天主要围绕网约车系统的乘客端原型页面做了一轮集中完善重点处理了定位、地址搜索、司机信息、行程页面、证件上传以及地址管理等功能。项目当前以前端单页原型index.html为主配合后端接口进行部分真实数据交互。一、定位与地图功能最开始遇到的问题是定位不准确用户实际在宿迁但页面定位到了上海。排查后发现浏览器定位本身可能返回的是网络位置或缓存位置不能完全代表真实位置。因此我对定位逻辑做了限制只接受宿迁范围内的坐标如果浏览器返回的位置不在宿迁就忽略并使用宿迁默认位置。二、起点和终点地址搜索地址搜索一开始存在一个问题搜索不到真实地址时页面会把用户输入的文字直接当作地址显示比如随便输入一个词也会出现结果。这不符合“真实地址查询”的要求。后来改成只显示腾讯地图接口返回的真实地址。如果腾讯接口被限流或没有结果就不再伪造地址。同时针对宿迁常用地点增加了少量已验证兜底保证结果是真实地址。起点和终点也改成了都可以手动查询。用户选择上车点或目的地后会保存到当前行程状态中并同步到页面显示。三、行程页面重构原来的“附近司机”页面只是地图加司机列表视觉上不像真实打车软件。后来参考行程中的页面样式进行了重构。最终改成了上半屏显示真实地图下半屏显示司机和行程信息显示目的地、预估费用、司机姓名、车型、车牌增加安全中心、取消行程、联系司机、司机详情按钮底部保留和其他页面一致的导航栏之前尝试过全屏地图叠加司机卡片但实际测试中按钮点击容易被地图层、遮罩层或覆盖元素影响尤其是“司机详情”按钮点不开。最后改成半屏地图、半屏信息区交互稳定很多。四、司机详情功能司机详情功能调试了比较久。最初设计为点击司机头像查看详情但由于页面上有地图层、行程卡、透明点击层等元素点击事件经常被拦截看起来像“没反应”。后来调整为取消头像点击作为主要入口在“联系司机”旁边新增“司机详情”按钮点击按钮直接读取当前司机信息并打开详情弹窗弹窗不再等待后端接口返回先显示本地司机数据这样交互更加明确也避免了接口慢或点击层级问题导致的无响应。五、司机入驻与资料上传司机端相关功能也做了多处调整手机号改成真实可填写输入框身份证、驾驶证、行驶证等资料上传改成真实图片上传人脸识别改成调用摄像头修复司机资料提交时报“司机ID不能为空”的问题修复证件提交时报“司机ID不能为空”的问题修复车辆绑定失败的问题其中司机 ID 是一个关键问题。后端接口要求很多司机相关提交都必须带driver_id所以前端需要在司机入驻成功后保存司机 ID并在后续资料提交、证件上传、车辆绑定时统一读取。六、地址管理功能最后新增了起点和终点地址保存功能。用户选择上车点和目的地后会自动保存到个人中心的地址管理里起点保存为“上车点”终点保存为“目的地”地址保存在本地localStorage后端保存失败时也不会丢失七、今天遇到的主要问题今天主要遇到的问题有浏览器定位不可靠浏览器可能返回网络定位、缓存定位或城市级定位不能完全代表用户真实位置。腾讯地图接口限流地址搜索和路线规划依赖腾讯接口如果 key 被限流就会出现无结果或请求失败。地图层级影响点击地图 SDK 自带图层、控件、遮罩和自定义卡片叠加后容易导致按钮点不到。前端本地数据和后端数据混用地址管理同时存在本地保存地址和后端地址如果删除逻辑不区分就会调用错误接口。司机 ID 传递问题司机资料、证件、车辆绑定都依赖driver_id前端必须保证流程中持续保存和读取。原型页面功能越来越多单个index.html承载了登录、定位、行程、司机入驻、地址管理等大量逻辑后续需要拆分组件和模块。八、阶段性成果目前项目已经具备了比较完整的网约车乘客端原型流程登录注册实名认证定位到宿迁手动选择起点和目的地地址真实搜索行程页面展示地图路线展示司机信息展示司机详情查看地址管理保存起终点司机入驻、资料上传、人脸识别、车辆绑定整体从一个静态原型逐步变成了可以交互、可以保存数据、可以调用部分真实接口的网约车应用雏形。九、后续优化方向后续可以继续优化将index.html拆分为模块化前端工程为腾讯地图接口配置正式可用的 key地址搜索改成统一的真实 POI 服务行程路线增加距离、时长、费用计算司机详情接入真实后端数据地址管理区分本地地址和云端地址增加订单创建、取消、支付等完整流程优化移动端点击区域和交互层级