uni-app地图组件的使用

本文似流水帐，着实枯燥无味，若不是您喜欢的类型， 请左上角。

项目需求是： 一个uni-app开发的android app中有地图页面， 能展示电缆线，施工区域之类的。转换成地图相关的语言：1， 用户能在展示地图的绘制页，选择城市位置，绘制施工区域（填充颜色的多边形），2， 保存之后需要计算出当前绘制的多边形与现有电缆（折线）有多少交点，3，在详情页展示折线和多边形。

接到需求，兴高采烈发现uni-app上有map组件， 并且还有提供了绘制折线和多边形功能，爽的飞起！

然后有了以下经历：

使用自带的map,先来模拟一番，

1, 使用.vue文件来写， 绘制页的施工区域是多边形， .vue文件不支持map的多边形覆盖物；
点击页面对应折线(电缆线)会有弹框提示(此电缆线名称、位置、维护人等)， .vue文件cover-view中无法嵌套dom，放弃！

2，各种搜索和查看文档，.nvue文件能实现我的需求并且有比较简单，激情又来了，

文件后缀改成.nvue ，，边写边调试，网页， 安卓模拟器和手机都开着，
同样的页面，安卓模拟器和手机上显示的竟然不一样！，调整样式（.nvue支持的样式和普通h5有区别），给弹框加的黑色透明的box-shadow， 手机打开一片黑，像加了个隆重的黑色边框（又与黑色边框不一样， 应该是安卓上多这些样式的兼容实现方面的问题吧），像是花的眼线晕染成黑眼圈的样子，当然这只是样式，我不要阴影了， 接着往下写，然后定位又不一致了，废了半天力气，一向在样式上很自信的我， 此刻想沉默，，，对这块不熟，后期迭代维护时如果遇到其他坑，有新的无法在此基础上实现的功能或者兼容方面有大问题的话，咋办？自己最有把握的还是h5呐！

又放弃。

3， web-view内嵌html来写，引入百度地图api, 不断的调用BMap生成point, polyline, polygon，OK的没问题，后来看操作繁琐，页面上的其他逻辑我还在操作dom， 突然觉得我要vue何用， 一个老哥的给了使用vue-baidu-map的建议， 然后带着坚定的眼神又走上了重写之路，

4，终结篇，
此刻内心已经很平静了， 就是它了，唯一的选择，

vue, vue-baidu-map, axios 顺利的实现了需求，

 

两点细节：

1，判断折线和多边形相交，百度地图有个几何运算相关的库（http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/BMapLib.GeoUtils.html）能判断point是否在多边形中，可以首先将折线上的点过滤一下， 如果有在多边形中的那折线和多边形必定相交；其次如果多边形之和这线上的某一段相交的话该怎么办呢？ （二分法取点判断？，当然可以不过想到更好的）可以判断多边形的边与折线上的某一段是否相交， 如果折线和多边形非包含相交那么，边线必有相交，万事大吉，心情愉悦！

（点是否在多边形中实现原理：百度库中使用的是射线法， 过这个点的射线与多变性相交的个数为单数则在内部；两个线段是否相交，使用向量叉乘来实现，具体细节嘛， 抄的！图像处理之类的内核都是数学！）

2，折线上有点击事件， 无论怎么该都实现不了， 触摸事件也不行，后来发现，pc的话折线是svg中的path实现的，一个path一条线，而h5, 所有的线都在一个canvas中， 我？（如果canvas里面所有折线绑定了事件的话应该是能实现的， 不过此刻真的无解），和同事商议放弃此需求，优雅降级换成了其他方式。

 

写页面是一个不断尝试的过程

 

很俗气的对自己说一声，不管未来如果，你都改坚强且坚定的走下去，要相信自己的执着， 也相信所追寻的会有结果。
这一年来， 日子过得些许漫长！也顺遂，也蹉跎！