Uniapp 地图标点 点击事件 markertap /bindmarkertap 不生效
先来说说 uniapp 的使用感想:
刚开始使用 uniapp 不久,使用上来说与 vue3 没有多大区别,setup 语法感觉非常舒适,使用起来方便、简易,相对于使用 flutter 、原生来说,对于小型企业来说真的是属于便利的一个跨平台框架了。
国内的现状,开发成本降低、适配平台需求较广,例如小程序 (支付宝、微信、抖音等等)、APP (android、ios)以及遥遥领先 harmony os。目前官方有说明已经大部分适配 鸿蒙,这个框架还是挺强的。
对于这种适配层面较广的框架,难免就会出现很多 BUG、兼容性适配。
今天遇到的问题:
- markertap 事件不生效
- 使用:markers 直接赋值在 map 微信开发工具正常显示、真机运行不显示
- 使用:covers 直接赋值在 map 微信开发工具不显示、真机运行显示正常
场景:
<map show-location
id=“map”
:latitude=“latitude”
:markers=“showMarker” :covers=“showMarker”
:scale=“scale” :longitude=“longitude”
:polyline=“polyines” name=“index-map”
style=“width: 100%;” :style="{height :${mapHeight}px
}"
@tap=“onMapTap” @markertap=“onMarkerTap”>
遇到了 marker 不显示,后面将 markers 和 covers 都赋值在 map 组件上。最后都能看到了。于是开始解决 markertap 不生效的问题。
尝试:
- 使用 @markertap 绑定事件, 在微信开发者工具中可以正常运行,但是真机调试点击不了,不能正常响应
- 使用 bindmarkertap 进行绑定,随后在微信开发者工具报错,"In Component Unabled to find onMarkerTap method to handle markertap."
最终解决方案:
<map show-location
id=“map”
:latitude=“latitude”
:scale=“scale” :longitude=“longitude”
:polyline=“polyines” name=“index-map”
style=“width: 100%;” :style="{height : ${mapHeight}px
}"
@tap=“onMapTap” @markertap=“onMarkerTap”>
最终的解决方案就是将 marker 数据通过代码 手动添加到 map, 事件绑定仍然采用 @markertap 的形式去绑定。
原因暂时未知:有可能是 uniapp 在适配层没有去兼容 ,响应式 marker 数据没有绑定被点击的事件。