用户7810
用户7810
  • 发布:2023-07-05 17:03
  • 更新:2023-07-26 18:09
  • 阅读:1242

【报Bug】BUG旅途之【我算老几】·打卡第21天

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: Alpha

HBuilderX版本号: 3.8.5

手机系统: Android

手机系统版本号: Android 11

手机厂商: OPPO

手机机型: oppo A1

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

*使用官方示例的代码在vue2项目运行正常_mapContext.on可以监听到事件,在vue3项目里没有反应**
https://uniapp.dcloud.net.cn/api/location/map.html#createmapcontext

预期结果:

希望获得聚合簇的事件事件

实际结果:

在vue3项目无反应

bug描述:

使用官方示例的代码在vue2项目运行正常_mapContext.on可以监听到事件,在vue3项目里没有反应

<template>  
  <view class="content">  
    <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>  
  </view>  
</template>  

<script>  
  const img = '/static/logo.png';  

  export default {  
    data() {  
      return {  
        latitude: 23.099994,  
        longitude: 113.324520,  
      }  
    },  
    onReady() {  
      this._mapContext = uni.createMapContext("map", this);  

      // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})  
      this._mapContext.initMarkerCluster({  
        enableDefaultStyle: false,  
        zoomOnClick: true,  
        gridSize: 60,  
        complete(res) {  
          console.log('initMarkerCluster', res)  
        }  
      });  

      this._mapContext.on("markerClusterCreate", (e) => {  
        console.log("markerClusterCreate", e);  
      });  

      this.addMarkers();  
    },  
    methods: {  
      addMarkers() {  
        const positions = [  
          {  
            latitude: 23.099994,  
            longitude: 113.324520,  
          }, {  
            latitude: 23.099994,  
            longitude: 113.322520,  
          }, {  
            latitude: 23.099994,  
            longitude: 113.326520,  
          }, {  
            latitude: 23.096994,  
            longitude: 113.329520,  
          }  
        ]  

        const markers = []  

        positions.forEach((p, i) => {  
          console.log(i)  
          markers.push(  
            Object.assign({},{  
              id: i + 1,  
              iconPath: img,  
              width: 50,  
              height: 50,  
              joinCluster: true, // 指定了该参数才会参与聚合  
              label: {  
                  width: 50,  
                  height: 30,  
                  borderWidth: 1,  
                  borderRadius: 10,  
                  bgColor: '#ffffff',  
                  content: `label ${i + 1}`  
              }  
            },p)  
          )  
        })  
        this._mapContext.addMarkers({  
            markers,  
            clear: false,  
            complete(res) {  
              console.log('addMarkers', res)  
            }  
        })  
      }  
    }  
  }  
</script>  

<style>  
  .content {  
    flex: 1;  
  }  

  .map {  
    flex: 1;  
  }  
</style>  
2023-07-05 17:03 负责人:DCloud_uni-ad_HDX 分享
已邀请:

最佳回复

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

vue3 临时解决方案,参考下面的代码

this._mapContext.on({  
  name: "markerClusterCreate",  
  callback: (e) => {  
    console.log("markerClusterCreate", e);  
    const clusters = e.clusters  
    const markers = clusters.map(cluster => {  
      const {  
        center,  
        clusterId,  
        markerIds  
      } = cluster  
      return {  
        ...center,  
        width: 60,  
        height: 60,  
        clusterId, // 必须  
        iconPath: img,  
        label: {  
          content: markerIds.length + '',  
          fontSize: 20,  
          width: 20,  
          height: 20,  
          bgColor: '#00ff00',  
          borderRadius: 30,  
          textAlign: 'center',  
          anchorX: 0,  
          anchorY: -30,  
        }  
      }  
    })  
    this._mapContext.addMarkers({  
      markers,  
      clear: false,  
      complete(res) {  
        console.log('clusterCreate addMarkers', res)  
      }  
    })  
  }  
});
  • 用户7810 (作者)

    感谢大佬救命之恩啊,刚试了下,这样写可以监听到了,我工作保住了,太感谢了....

    2023-07-26 14:44

  • 用户7810 (作者)

    6666666

    2023-07-26 14:44

  • 用户7810 (作者)

    大佬.麻烦问一下.vue3 nvue 使用map的添加自定义点聚合样式,在视野显示标记点比较多时,每次都是先展示默认的点聚合样式,然后再加载覆盖自定义的点聚合样式,请问这个问题怎么处理啊,能不能不initMarkerCluster初始化后不要显示默认的聚合点样式啊,要不然在标记点较多时先显示默认样式再覆盖自定义样式相当难看啊

    2023-08-11 21:37

  • 用户7810 (作者)

    就是说,我在页面初始化时已经initMarkerCluster和监听markerClusterCreate了,但在聚合点'markerClusterCreate'发生变化时 设置并添加点聚合样式的时候是在默认点聚合样式出现后的

    2023-08-11 21:41

  • 用户7810 (作者)

    希望大帅哥能在有空的时候回复我一下啊.,.期待

    2023-08-11 21:43

  • while

    回复 用户7810: 老哥,这个有解决办法吗,点多了一闪一闪的很难看丫

    2024-03-20 10:48

  • Analog

    4.08版本 vue

    this._mapContext = uni.createMapContext("map", this);


    // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})  
    this._mapContext.initMarkerCluster({
    enableDefaultStyle: false,
    zoomOnClick: true,
    gridSize: 60,
    complete(res) {
    console.log('initMarkerCluster', res)
    }
    });

    为什么这个 console 没有打印呢

    2024-07-30 16:54

  • Analog

    回复 Analog: vue2

    2024-07-30 16:55

Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

map标签单独绑定需要的事件看看

  • 用户7810 (作者)

    其他事件都正常的,就是这个uni.createMapContext(mapId,this) 上的 .on方法的回调在vue3没反应.测试的vue2是正常的...

    2023-07-05 17:17

hengsen

hengsen

原来这里想解决问题需要每天打卡表示诚意啊?受教了!

  • 用户7810 (作者)

    可能优先级太低吧,可能别遗忘了,没办法啊

    2023-07-26 11:32

  • hengsen

    回复 用户7810: 在这里除非有一堆人被下架,否则优先级都是无吧。

    2023-07-26 11:42

  • 用户7810 (作者)

    回复 hengsen:

    2023-07-26 11:45

  • 用户7810 (作者)

    咋整

    2023-07-26 11:46

  • 尼卡路西

    学习了

    2023-07-26 11:47

用户7810

用户7810 (作者)

哪位大佬帮瞅瞅啊.跪谢了

用户7810

用户7810 (作者)

哪位大佬帮瞅瞅啊.跪谢了

用户7810

用户7810 (作者)

....

用户7810

用户7810 (作者)

11111

用户7810

用户7810 (作者)

11111111111

用户7810

用户7810 (作者)

111111111

用户7810

用户7810 (作者)

111111

用户7810

用户7810 (作者)

11111

用户7810

用户7810 (作者)

11111

用户7810

用户7810 (作者)

有人吗

用户7810

用户7810 (作者)

o没k

DCloud_UNI_Anne

DCloud_UNI_Anne

已反馈相关人员处理,已加分感谢反馈!

  • 用户7810 (作者)

    感谢回复~~

    2023-07-08 19:46

  • 用户7810 (作者)

    请问大佬什么时候可以处理好啊,我这边有点着急,老板煞笔一直催我,还有那个自定义聚合点样式不可以是图片吗

    2023-07-10 14:15

用户7810

用户7810 (作者)

什么时候可以修复啊,或者有什么临时方案吗,难搞啊...

用户7810

用户7810 (作者)

1111111

用户7810

用户7810 (作者)

1111111

用户7810

用户7810 (作者)

111111111111

用户7810

用户7810 (作者)

111111111111

用户7810

用户7810 (作者)

1111111111111111111

用户7810

用户7810 (作者)

1111

用户7810

用户7810 (作者)

顶顶顶

用户7810

用户7810 (作者)

顶顶顶

用户7810

用户7810 (作者)

you see me

用户7810

用户7810 (作者)

..........

用户7810

用户7810 (作者)

11111111

1***@qq.com

1***@qq.com

我这也遇到了

  • 用户7810 (作者)

    大佬,你怎么处理的,有什么好方案吗

    2023-07-26 11:43

用户7810

用户7810 (作者)

请问何时可以处理一下下啊

用户7810

用户7810 (作者)

**如果有人也遇到我这样的问题,请大力写出来,为bug发声,为广大uniapp开发者献出一点点贡献,让后人不再踩坑

凡顶贴发声者可获得本人亲手点赞+送分+回复**

用户7810

用户7810 (作者)

对于视而不见,我方表示强烈谴责

  • 最光阴

    哥们,实在是急的话可以试着用web-view加载本地页面的方式,加载web地图,点聚合等各种功能都有,我们公司的app对地图功能可以说重度依赖了,所以求稳定性用的是web地图,即使后面改原生地图也会保留web地图做保险的

    2023-07-14 10:14

  • 用户7810 (作者)

    回复 最光阴: 大佬,web-view我不会啊,好搞吗,在app性能上表现怎么样啊,感谢大佬回复~

    2023-07-14 13:53

  • 最光阴

    回复 用户7810:还可以,不卡顿,一般uni解决不了的问题我都用web-view解决的,毕竟还是h5页面的功能和花样更多一些,基本会js和css就会写了,很简单的。

    2023-07-14 14:49

  • 用户7810 (作者)

    回复 最光阴: 哦哦,感谢大佬指点,我去研究研究

    2023-07-14 17:23

1***@qq.com

1***@qq.com

请问解决了吗,我也这样

  • 用户7810 (作者)

    没解决,也没回复了,好像问题被屏蔽了一样,每天顶贴无人理

    2023-07-25 12:24

  • DCloud_UNI_GSQ

    回复 用户7810: 没有屏蔽,目前主要开发人员都去开发uts/uvue了,其他方面暂无分配人员较少,请见谅。后续uts/uvue开发好后,可能会要建议你使用uts/uvue来开发性能更好的app。

    2023-07-26 11:30

  • 用户7810 (作者)

    回复 DCloud_UNI_GSQ: 感谢回复,大佬们辛苦了,uvue出来的话一定用,那能不能抽一点点时间帮忙搞一搞这个bug啊,vue2正常就是vue3监听不到,我想是不是哪个响应式的问题,可能不是难么难修复,实在是我vue3改vue2的话不现实啊,自己写这个点聚合我又太菜,只能求官方大大们修复修复了

    2023-07-26 11:38

  • DCloud_UNI_GSQ

    回复 用户7810: 感谢理解,已经再次催促了相关维护人员,不过他这段时间确实忙不过来,后续他会抽时间看一下。

    2023-07-26 11:49

  • 用户7810 (作者)

    回复 DCloud_UNI_GSQ: 感谢再次回复,但愿可以早点抽个空看看啊,群里也有很多人遇到了这个问题,还是希望早点能够处理一下,支持uni感谢uni

    2023-07-26 13:12

要回复问题请先登录注册