1. 背景

美团打车业务很早就在美团App与点评App中提供了服务入口，并在技术上采用了H5与Native的混合开发技术。随着业务上线，有用户反馈我们的地图性能有一些问题，原因是我们打车地图使用的是Web版的地图（通过腾讯地图JavaScript API)，业内同类产品使用的是Native版的地图SDK，Native地图相比Web地图具有天然的性能优势，所以美团打车地图从首屏地图加载到后续的地图操作体验都有一定差距。

1.1 问题与挑战

为了改善打车业务的地图体验，我们想到的方案是在展示地图的部分使用Native地图，而非地图部分使用H5页面来显示，这样既能追平与竞品的地图性能差距，又能充分发挥H5的开发效率。

这种方案乍一看似乎是传统的Hybrid开发，没什么难度与新奇。比如地图使用预先内置到App中的地图SDK实现，H5与Native的交互使用业界成熟的JSBridge技术。但从打车业务角度来看，因为打车业务有很多功能入口需要漂浮在地图之上，如起终点卡片、用户中心入口等，这种漂浮功能在技术上并不容易实现，而且还要保证用户触摸动作在漂浮元素与地图上发生时，分别派发给各自的事件系统，Hybrid技术在这方面没有经验可以借鉴。

带着这些挑战，我们进行一系列的尝试与试验，最终将问题解决并封装出我们打车业务的地图调用框架，我们称之为Native地图与Web融合框架（下文简称融合框架）。在这个过程中，我们总结出了一些经验，希望能给从事相关研究的同学带来一些帮助。

1.2 融合框架上线前后的对比

其实，融合框架已经在大众点评App中上线了几个月的时间了，我们可以先看看上线前后的效果对比。