如何在React Yandex Maps中为ObjectManager添加onClick事件处理器？

你可以通过给<ObjectManager>组件绑定onClick事件来处理单个标记的点击，具体实现如下：

步骤1：定义点击事件处理函数 #

在组件中编写处理点击逻辑的函数，通过事件对象区分点击的是单个标记还是集群，并获取对应数据：

const handleObjectClick = (event) => {
  // 获取被点击对象的ID
  const objectId = event.get('objectId');
  if (objectId) {
    // 点击的是单个Placemark
    const clickedFeature = event.target.objects.getById(objectId);
    console.log('点击的标记信息：', clickedFeature);
    // 这里可以添加你的业务逻辑，比如弹窗展示详情、页面跳转等
  } else {
    // 点击的是集群
    const clusterId = event.get('clusterId');
    console.log('点击的集群ID：', clusterId);
  }
};

步骤2：给ObjectManager绑定点击事件 #

修改你的<ObjectManager>组件，添加onClick属性指向刚才定义的处理函数：

<YMaps>
    <Map className="w-full h-full"
        state={{ center: center, zoom: 12 }}
        onBoundsChange={handleBoundsChange}
    >
        <ObjectManager
            options={{
                clusterize: true,
            }}
            objects={{
                preset: "islands#greenDotIcon",
            }}
            clusters={{
                preset: "islands#redClusterIcons",
            }}
            defaultFeatures={data.result.data.map((el: APZ) => ({
                type: "Feature",
                id: el.id,
                geometry: {
                    type: "Point",
                    coordinates: [el.lat, el.long],
                },
            }))}
            onClick={handleObjectClick} {/* 绑定点击事件 */}
        />
    </Map>
</YMaps>

关键说明 #

• event.get('objectId')：用于判断点击目标是否为单个标记，存在值则是单个标记的ID，无值则代表点击了集群。
• event.target.objects.getById(objectId)：通过ID获取对应的Feature对象，里面包含你预先设置的id、geometry等数据，可直接用于后续业务逻辑。

内容的提问来源于stack exchange，提问作者Islom