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

封装一层JS形式的地图接口，为上层业务提供地图服务，该层借助JSBridge通讯桥实现H5与Native层的异步通讯。

本文插图

4.3 通讯桥简介
通讯桥即JSBridge技术，主要实现H5与Native的信息交互，这方面的技术都已比较成熟，业界有非常多的JSBridge实现，原理也都类似，常见的有：原生对象注入到H5层、URL拦截技术， Native调用JS常用的内置函数stringByEvaluatingJavaScriptFromString等。美团内部有比较成熟的KNB框架，所以项目中直接使用了KNB框架。
4.4 Native地图层
该层在地图SDK（如腾讯地图SDK）基础上进行了封装，提供一些打车业务友好的接口，如地图基本操作、打车起终点Marker添加、接送驾司机小车动画、地图事件、各种Marker的信息弹窗等。

本文插图

4.5 Dom元素热区数据的自动维护技术
打车业务前端的技术栈是: Vue + VueX + Vue-Router构建的单页系统。如下图所示，页面中存在很多H5元素需要添加热区，逐个元素编写代码添加的话会很繁琐，而且页面元素的位置、大小变化时还需要同步更新热区数据，这里我们使用了Vue中的directive（指令）来解决了此问题。

本文插图

以上左右2图是用户操作时页面展示的不同状态，很明显右图底部卡片变高了，卡片变化同时需要同步更新对应的热区数据， directive技术可以很方便解决此问题，原理如下：

在添加元素时， Vue指令的bind钩子函数被触发，此时计算出弹窗元素的大小和位置：使用getBoundingClientRect函数可以获取到元素的left、top、width、height等信息，将新的热区数据通过setHotRegion函数更新到手势分发层。
在移除元素时， unbind钩子函数被触发，此时将热区数据移除，这样便实现了热区的自动添加删除功能了。
使用指令技术很简捷，编写好指令的逻辑后注册到全局，在需要动态更新热区的元素上设置个v-hotRegion标签就可以了。

4.6 调试工具及测试
调试工具使用模拟器、真机都可以，开发期间我们使用的模拟器开发，测试期间QA使用真机验证。调试过程中主要验证2部分功能，分别是热区的验证与地图接口验证。
热区验证
主要验证主页面设置的热区是否正确，包括是否可以点击、底部卡片是否能正常拖拉、业务功能是否正常等。因为热区数据是一串数字，形如：[0, 0, 50, 50] ，无法直观判断出该数据是否有误，于是我们开发了一个可视化工具，将设置热区的元素都用红色矩形高亮显示，如下图所示，这样就能快速诊断出热区数据是否有异常。工具是使用Canvas画布实现的，画布大小与屏幕大小完全重合，借助画布就可以将矩形热区数据在屏幕中实时绘制出来。

本文插图

地图接口验证
主要是编写单元测试完成的，本项目封装了50多个地图接口，每个接口都编写单测用例，观察入参、出参、控制台输出结果，地图展示效果是否正确等。测试主要在iOS模拟器中完成，这样方便在控制台打印一些调试信息进行诊断。
5. 上线效果
该框架在大众点评App中上线后地图体验明显提升，主要有体现在以下几个方面：