一、背景

B 端目前有三个模块使用了地图，虽然在三个模块中使用的功能大致一样，但由于模块主 R 不同，且地图能力都是通过 JSAPI 的形式暴露给开发者，没有统一的开发范式，导致每个模块在地图能力使用上各有千秋。另外，还有存量问题待优化，以及地图 SDK 本身存在的问题需要解决或避免。

当前地图相关业务开发面临以下挑战：

• 上手难度大，33% 的线上问题都是地图能力使用不当造成的；
• 存量问题多，经过长达 1 个月的治理，仍然有 28%（7个） 的问题未处理；
• 统一维护难，B 端 3 个地图业务模块在地图的能力使用方式各有不同，维护其中一个模块的经验在另一个模块无法完全复用；
• 缺少通用能力的封装，各模块对地图能力封装方式不同，无法形成通用封装。

二、横向调研

2.1 调研目的

1. 了解兄弟团队的地图使用现状；
2. 学习兄弟团队地图相关错误治理经验；
3. 学习借鉴其他团队的地图封装方案；

2.2 调研内容

地图侧调研

1. 现在已知的 JSAPI 业务团队范围；
2. 业务团队是否有一些正向反馈或者负向反馈，例如：避坑指南、最佳实践分享等；
3. 是否有团队提出 React/Vue 组件的需求、地图团队是否有这方面计划；

业务方调研

1. 调研对象（下称“对象”）使用美团地图 JSAPI 的时长；
2. 开发/维护过程中是否遇到难以解决的问题、是否有记录；
3. 对象使用 JSAPI 的方式（能力封装、组件封装、其他）；
4. 对象认为使用 JSAPI 研发效率如何，有没有提效方面的的规划；
5. 对象是否考虑过地图组件封装，是否有技术方案（考虑过）；

2.3 调研结果 & 结论

结果

本次共调研了 5 个团队，分别属于 4 个 BU，结果如下：

1. 80% 的团队认为使用 JSAPI 开发效率不高；
2. 60% 的团队在使用地图组件库；
3. 仅 1 个团队有自研地图组件库的规划；
4. 地图侧暂无支持组件库的计划（因为 BG 内已有相关组件库）；

结论

使用地图组件库为最佳实践。

三、社区方案调研

组件库	活跃度	下载量	下载趋势	是否支持美团地图	是否推荐
react-amap	极低	3.7k / m	下降	是	❌
@uiw/react-amap	极高	1.7k / m	-	是	✅
roo-map	极低	3.1k / m	-	是	❌

image.png

四、技术方案结论

选定 @uiw/react-amap 高德地图组件库 + 自有新增组件库 来覆盖支持地图功能点。