uni-app nvue map 聚合的点击事件无法触发

uni-app nvue map 聚合的点击事件无法触发

示例代码：

this.mapContext = uni.createMapContext(this.mapId, this); 这个实例底下找不到 on 打印出来原型连看不到


## 操作步骤：


this.mapContext = uni.createMapContext(this.mapId, this);
这个实例底下找不到 on
打印出来原型连看不到

预期结果：

可以触发 nvue map 聚合的点击事件


## 实际结果：


this.mapContext = uni.createMapContext(this.mapId, this);
这个实例底下找不到 on

bug描述：

MapContext.on(‘markerClusterClick’, (res) => {}) map聚合点击事件用不了


## 开发环境

| 项目         | 版本号   |
|--------------|----------|
| 产品分类     | uniapp/App |
| PC开发环境操作系统 | Windows       |
| PC开发环境操作系统版本号 | win 10        |
| HBuilderX类型 | 正式       |
| HBuilderX版本号 | 3.2.3        |
| 手机系统     | Android       |
| 手机系统版本号 | Android 10    |
| 手机厂商     | 小米          |
| 手机机型     | 小米9         |
| 页面类型     | nvue          |
| 打包方式     | 云端          |
| 项目创建方式 | HBuilderX     |

![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211005/bdadc75b4d6051d3c98bd43d7ee83057.png)

![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211005/8f877e407dba58a803fa8c5e1c6b5b1a.png)

更多关于uni-app nvue map 聚合的点击事件无法触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

Bug 已确认，当前版本尚未实现，预计下个版本支持

更多关于uni-app nvue map 聚合的点击事件无法触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还是没有修复啊，都3.2.9版本了

回复 菜鸟陈: 前天刚回复你，确认问题，正在修复中，预计3.2.10支持，大概这周会发布

你的聚合是怎么实现的？ 文档都没有说清楚，搞了好久都没搞出来。

同问点聚合，也搞了好久了

3.2.10 已支持 MapContext.on 后续将在文档中提供示例代码

已更新文档，参见文档中地图聚合API示例: https://uniapp.dcloud.net.cn/api/location/map?id=createmapcontext

在 nvue 中使用 map 组件时，聚合点击事件确实需要通过 MapContext.on('markerClusterClick', callback) 来监听。根据你的描述，createMapContext 返回的实例中找不到 on 方法，这通常是因为 nvue 的 map 组件上下文创建方式与 vue 页面不同。

原因分析：

  1. nvue 页面中，createMapContext 的第二个参数应为当前页面实例，但 nvue 页面结构不同，可能未正确传递 this。
  2. HBuilderX 3.2.3 版本中，nvue 的 map 组件支持可能不完整，尤其是聚合事件相关 API。

解决方案：

  1. 检查 createMapContext 调用方式：

    // 在 nvue 页面中，通常直接使用 this 即可
this.mapContext = uni.createMapContext(this.mapId, this);

    如果仍无效，尝试省略第二个参数：

    this.mapContext = uni.createMapContext(this.mapId);

  2. 确认 map 组件配置： 确保 map 组件已开启聚合功能：

    <map id="myMap" :markers="markers" :enable-cluster="true" [@markerClusterClick](/user/markerClusterClick)="onClusterClick"></map>

    注意：nvue 中可能不支持 [@markerClusterClick](/user/markerClusterClick) 绑定，需通过 MapContext.on 监听。

  3. 使用 setTimeout 延迟监听： 地图上下文创建后，组件可能未完全初始化，可延迟绑定事件：

    this.mapContext = uni.createMapContext(this.mapId, this);
setTimeout(() => {
  this.mapContext.on('markerClusterClick', (res) => {
    console.log('聚合点击事件触发', res);
  });
}, 500);
回到顶部