首页

Uniapp 地图标点 点击事件 markertap / bindmarkertap 不生效
先来说说 uniapp 的使用感想：
刚开始使用uniapp 不久，使用上来说与vue3没有多大区别，setup 语法感觉非常舒适，使用起来方便、简易，相对于使用 flutter 、原生来说，对于小型企业来说真的是属于便利的一个跨平台框架了。
国内的现状，开发成本降低、适配平台需求较广，例如小程序(支付宝、微信、抖音等等)、APP （android、ios）以及遥遥领先 harmony os。目前官方有说明已经大部分适配 鸿蒙，这个框架还是挺强的。
对于这种适配层面较广的框架，难免就会出现很多BUG、兼容性适配。

今天遇到的问题：

  • markertap 事件不生效
  • 使用:markers 直接赋值在map 微信开发工具正常显示、真机运行不显示
  • 使用:covers 直接赋值在map 微信开发工具不显示、真机运行显示正常
    场景：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <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">
    </map>
    <script setup lang="ts">

    const markers = ref<Map<String, Marker>>(new Map())
    const showMarker = computed(()=> [...markers.value.values()])

    // 当marker 被点击的时候
    function onMarkerTap(e) {
            console.log("====> marker 被点击", e);
            activeId.value = e.detail.markerId
            roadLine()
    }

    //.....................
    </script>

遇到了 marker 不显示，后面将 markers 和 covers 都赋值在map 组件上。最后都能看到了。于是开始解决 markertap 不生效的问题。

尝试：

  1. 使用 @markertap 绑定事件， 在微信开发者工具中可以正常运行，但是真机调试点击不了，不能正常响应
  2. 使用 bindmarkertap 进行绑定，随后在微信开发者工具报错，”In Component Unabled to find onMarkerTap method to handle markertap. “

最终解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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">
</map>
<script lang="ts" scoped>
    import { onLoad, onReady } from '@dcloudio/uni-app';
    
    let mapContext : UniApp.MapContext
    function getData(){
         //....
         mapContext.addMarkers({
                            markers: [...markers.value.values()],
                            clear: true
         } as UniApp.MapContextAddMarkersOptions)
         //....
    }

    onLoad(() => {
         mapContext = uni.createMapContext("map")
    })
   //....
</script>

最终的解决方案就是将 marker 数据通过代码 手动添加到map， 事件绑定仍然采用 @markertap 的形式去绑定。
原因暂时未知：有可能是 uniapp 在适配层没有去兼容 ，响应式marker数据没有绑定被点击的事件。