一、背景
B 端目前有三个模块使用了地图，虽然在三个模块中使用的功能大致一样，但由于模块主 R 不同，且地图能力都是通过 JSAPI 的形式暴露给开发者，没有统一的开发范式，导致每个模块在地图能力使用上各有千秋。另外，还有存量问题待优化，以及地图 SDK 本身存在的问题需要解决或避免。
当前地图相关业务开发面临以下挑战：
- 上手难度大，33% 的线上问题都是地图能力使用不当造成的；
- 存量问题多，经过长达 1 个月的治理，仍然有 28%（7个） 的问题未处理；
- 统一维护难，B 端 3 个地图业务模块在地图的能力使用方式各有不同，维护其中一个模块的经验在另一个模块无法完全复用；
- 缺少通用能力的封装，各模块对地图能力封装方式不同，无法形成通用封装。
二、横向调研
2.1 调研目的
- 了解兄弟团队的地图使用现状；
- 学习兄弟团队地图相关错误治理经验；
- 学习借鉴其他团队的地图封装方案；
2.2 调研内容
地图侧调研
- 现在已知的
JSAPI业务团队范围； - 业务团队是否有一些正向反馈或者负向反馈，例如：避坑指南、最佳实践分享等；
- 是否有团队提出
React/Vue组件的需求、地图团队是否有这方面计划；
业务方调研
- 调研对象（下称“对象”）使用美团地图
JSAPI的时长； - 开发/维护过程中是否遇到难以解决的问题、是否有记录；
- 对象使用
JSAPI的方式（能力封装、组件封装、其他）； - 对象认为使用
JSAPI研发效率如何，有没有提效方面的的规划； - 对象是否考虑过地图组件封装，是否有技术方案（考虑过）；
2.3 调研结果 & 结论
结果
本次共调研了 5 个团队，分别属于 4 个 BU，结果如下：
- 80% 的团队认为使用 JSAPI 开发效率不高；
- 60% 的团队在使用地图组件库；
- 仅 1 个团队有自研地图组件库的规划；
- 地图侧暂无支持组件库的计划（因为 BG 内已有相关组件库）；
结论
使用地图组件库为最佳实践。
三、社区方案调研
| 组件库 | 活跃度 | 下载量 | 下载趋势 | 是否支持美团地图 | 是否推荐 |
|---|---|---|---|---|---|
| react-amap | 极低 | 3.7k / m | 下降 | 是 | ❌ |
| @uiw/react-amap | 极高 | 1.7k / m | - | 是 | ✅ |
| roo-map | 极低 | 3.1k / m | - | 是 | ❌ |
image.png
四、技术方案结论
选定 @uiw/react-amap 高德地图组件库 + 自有新增组件库 来覆盖支持地图功能点。
