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

下方WebView与上方Native地图是平级的组件，各占屏幕的一半，相互间不存在压盖关系，实现起终点面板上下滑动效果困难。
左上角、右上角的更多菜单，广告入口位置需要新增2个WebView组件才能实现覆盖在地图之上， WebView组件再加载对应H5页面实现上述布局，整个步骤比较繁琐。
多个WebView组件构成的页面布局，由于内存空间不共享，它们之间信息的同步比较困难，太多的WebView组件对系统性能也是一种浪费。

调研结论是：市面上现存技术都无法满足打车场景的需求。
全新方案的提出
基于打车场景的特殊性，我们做了一个大胆的假设：把页面分为2层，下层是Native地图层，布满屏幕；上层是WebView层，完全覆盖到Native地图层之上，如下图所示：

本文插图

我们期望的效果是：

点击H5元素时，点击事件会派发给H5 WebView容器处理。
点击地图区域时，点击事件会派发给Native地图组件处理。
H5与Native地图间的信息交互，可采用成熟的JSBridge技术实现。

具体实现思路有如下几点，参照下图：

Native地图位于下层， WebView置于Native地图之上， WebView背景透明，透过WebView可以看到下边的地图。红框区域是上层WebView打开的H5页面元素。
增加一个手势消息分发层，该层会智能判断手势事件落在H5元素还是地图元素中。举例：点击红框区域，消息会传递到WebView层的H5逻辑处理，点击红框之外的区域，消息会传递到Native地图层处理（地图移动、缩放等操作）。
H5与Native地图交互使用JSBridge完成。比如在地图中添加一个Marker ， H5层业务逻辑发出添加Marker的消息， H5层通过JSBridge技术将消息发送到Native地图层， Native地图收到消息后在地图中添加Marker元素。

本文插图

为了验证想法是否正确，我们首先通过Android平台开发出Demo ，验证这种分层智能传递消息的做法是可行的，该方案最大优点是兼顾了H5的开发效率与Native地图的高性能特性，非常符合美团业务地图场景的需求。为了让想法落地时更规范、更系统，我们进行了如下的框架设计。
3. 框架设计
3.1 热区数据介绍

本文插图

先介绍一个“热区数据”的概念，下图（3.2节）在手势分发层存在着消息分发热区数据部分，下文简称热区数据。热区数据是针对上层WebView的一个概念，只对WebView层有效，对下层Native地图层无效。如果用户点击屏幕事件想让H5来捕获处理，可以在屏幕区域内设置一个逻辑上的矩形区域，如：[0, 0, 50, 50]（上图左上角区域），这个数据被称为热区数据。
我们通过编写代码逻辑，控制手势消息分发的策略，如果手势消息发生在热区数据矩形范围内，我们把消息发送给WebView处理，否则发送给Native地图处理。如上图所示，可以在同一屏幕内设定多个热区， [0, 0, 50, 50]、[430, 0, 50, 50]、[0, 200, 480, 200] ，热区的格式可以自己定义，我们这里采用的基于WebView组件左上角为原点的像素坐标格式：[left, top, width, height] 。
3.2 框架图介绍