|Native地图与Web融合技术的应用与实践

有用户反馈美团打车地图的性能有一些问题，美团打车技术团队在调研分析之后，采用了一套Native地图与Web的融合框架，不仅实现了用户手势事件智能分发的机制，还解决了WebView与Native地图在同一页面内布局困难的问题，同时性能也得到全面的优化。本文系融合技术的经验总结与分享。

本文插图

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融合框架（下文简称融合框架）。在这个过程中，我们总结出了一些经验，希望能给从事相关研究的同学带来一些帮助。
2. 调研
基于混合技术开发体系，我们研究了市面上大部分H5页面与Native地图的应用场景，主要分为如下两类：