一.地图模块(map组件)

        我在做地图模块的时候因为要用到路线规划功能,所以引用了高德地图的小程序SDK,大家如果需要,可以参照官方SDK一步一步去配置,整个过程很简单(http://lbs.amap.com/api/wx/summary/),以下写写在地图模块遇到的一些坑。

  1.关于高德SDK路线规划

  整个过程没有太大的问题,但是写完之后发现我的导航总是不完整,有些路线只能显示一半,跟官网显示的完全不一样啊

    

  显示出来是这个鬼样子,当时还怀疑是不是高德返回的数据有问题,后来想想可能是自己在循环的过程中把路径中的点的位置搞混了。然后对着官网给的例子一句一句去对照,看看哪里不一样。OK,终于发现了问题

            

  菜鸡如我,结果真的是这里的问题,修改了之后,显示完美。原因就是这里单独的定义导致循环之后的points数组有问题

    

  2.小程序默认map原生组件永远层级最高

  关于这个问题,相信很多开发小程序的小伙伴都遇到过,因为我们在开发过程中会根据自己的需求在地图上面覆盖一些自己需要的东西。一开始不管怎样写在开发工具上显示完美(心里那个高兴啊~),但是一到真机上面,自己写的所有的东西都会被地图覆盖掉(想shi……)。

  再次研究小程序的官方API后,发现有cover-view这么个东西,可以覆盖到map组件上面,so只好把之前写的东西全部再用cover-view和cover-image重新写一遍。写完以后覆盖到map上方是满足的了,但是cover-view存在各种兼容问题。

      

  开发工具、Android手机上显示都正常,但是到了iphone上面,不管这个电话号码多长多短都会被截断,问了官方,说是正在解决中。因为我这里是电话号码,所以比较好处理,那就是给电话号码这一块设置一个min-width或者width,来暂时解决这个问题(欢迎补充其他情况以及解决方法)

  3.cover-view显隐问题

  上图中cover-view写的信息框再用display:none隐藏后再用display:block放出来的时候IOS上会出现只显示最外层cover-view里面的内容都没有了的情况,我这里就是显示的一个背景为白色的没有任何内容的模块,在查阅了一些文章以及官方开发者社区后找到了一个替代的方法:用wx:if代替display来实现元素的显隐。

  4.callout的显隐问题

  点击另一个marker的时候,之前点击的marker的callout不会自动隐藏。在开发者工具和IOS上面都没有问题,但是在安卓上面却存在这个问题,基本上100%复现

  

  这个问题目前是官方未做好兼容处理,因此我也没有花什么大力气来解决这个问题,最后用了cover-view自己封装信息框来代替这个callout的功能。