最近在用uni-app中开发了一个app项目,因为里面有map模块,所以这里用nvue开发,在写@markertap时,真是一言难尽,这里把需要注意的地方记录一下以供大家参考。
API介绍
![5551d8dcd35bce424fa16285734132dc.png](https://i-blog.csdnimg.cn/blog_migrate/ad396d8ae4851b27c03aa4e85784ccc6.jpeg)
注意事项一
当我们markers点击事件配置对应的函数时,如果你的标注点对应的数据对象中没有指定ID,此时你点击标注点时,函数是无法被触发的。
![90ae6191a5a9fb1a9c850d3c7f823f34.png](https://i-blog.csdnimg.cn/blog_migrate/135f79abf7701af16f355ab646c7002b.jpeg)
解决方法也很简单,指定一个ID即可。
![b9770914de9834f432be54870f806078.png](https://i-blog.csdnimg.cn/blog_migrate/f9073090dbc7eef3e4287cc93d7f9e31.jpeg)
好了,这时候你点击标注点时,对应的函数应该就会触发了,不过这里还是有个需要注意的地方,那就是ID不能为 0。当然,如果你的标注点中有 callout 气泡数据时,那可能还是不太行。下面有将解决方案。
注意事项二
如果你的标注点中指定callout时,你点击标注点时你会惊讶的发现然并卵,markertap事件并不会得到触发,这是因为marker中如果有callout时,你需要给map组件指定一个callouttap事件才可以。
![a597f43edf1874b34cee564f3bc7e18f.png](https://i-blog.csdnimg.cn/blog_migrate/afc3597eff254a3ffbc508efd08359c7.jpeg)
在安卓手机上,如果你的marker中有callout时,点击标注点会触发的并不是markertap事件而是 callouttap事件。没错,虽然官方描述是点击标注点上的气泡触发,但是事实上,你点击标注点它同样会得到触发。
![d97f288fa11446d48a62d9232c142c84.png](https://i-blog.csdnimg.cn/blog_migrate/909f83dfd27dea6935e5bd80bd36b7c6.jpeg)
至此,安卓手机应该是ok了。
注意事项三
上面说了,安卓手机应该OK了,言外之意当然是在苹果手机上还有surprise在等您去发掘。
事实上,如果你在苹果手机测试时,你会发现,callouttap事件只有在你点击标注点上的气泡时才会得到触发,这和官方的说法不谋而合。然后我就发现了这样一个规律,那就是当你的 marker标记有指定
callout气泡时,在安卓手机中callouttap事件可以完美驾驭markertap事件以及callouttap事件,也就是说在安卓手机中不管是点击标注点,还是标注点上面的气泡,callouttap事件都会得到触发。不过在苹果手机中,callouttap事件只有在点击标注点上的气泡时才会触发。不过问题不大,因为ios中,markertap是可以触发的,所以我们只需要在map组件中给callouttap事件和markertap事件指定相同的函数即可。
![98d6cd67fe65cf24f52b7e59d460028f.png](https://i-blog.csdnimg.cn/blog_migrate/6aea9376a1a31ff2603e611247dcc8e6.jpeg)
看一下效果:
![0163859416878f696f83591ba0c5f35e.gif](https://i-blog.csdnimg.cn/blog_migrate/2839d3103df0333d5c8055b1012f2bcf.gif)