带有可点击按钮的Leaflet divIcon

Question

我正在制作传单，我想为自定义 divIcon 中的图标添加单击事件，如下所示，

如果用户单击编辑（铅笔）图标，则应触发单击事件， 这是我正在处理的代码..，

    const drawShapeLabel = (layer: L.Layer, geoJson, coord, offset, iconAnchor) => {
        const handleEditClick = (event) => {
            console.log("Edit clicked");
        };
        const labelIcon = L.divIcon({
            className: "shape-label " + geoJson?.properties.backendId,
            html: `
                    <div>
                        <img style="position: absolute; top: 6px;" src="${Rearrange}">
                        <span style="position: relative; right: -10px; top: -6px;">${
                            geoJson?.properties.label ? geoJson.properties.label : ""
                        }</span>
                        <img id="editButton-${geoJson?.properties.backendId}" 
                        style="position: relative; right: -12px; top: -2px; cursor: pointer;" 
                        src="${Edit}" onclick="{handleEditClick(event)}" alt="Edit">
                    </div>
                `,
            iconSize: [80, 20],
            iconAnchor: iconAnchor,
        });

        const marker = L.marker([coord[1], coord[0] + offset], {
            icon: labelIcon,
        });

        // marker
        //     .on("add", () => {
        //         alert("clicked");
        //         const button = document.getElementById(`editButton-${geoJson?.properties.backendId}`);
        //         alert("button");
        //         // if (button) {
        //         //     button.addEventListener("click", handleEditClick);
        //         // }
        //     })
        //     .addTo(context.map);

        // const marker = L.marker([coord[1], coord[0] + offset], { icon: labelIcon });
        // marker.on("click", () => {
        //     console.log("Edit clicked");
        // });

        // const marker = drawShapeLabelComponent(geoJson, coord, offset, iconAnchor);
        marker.addTo(context.map);
    };

我可以看到自定义 divIcon，但 onClick 事件未触发。

我尝试了一些解决方案，例如，

1. React Leaflet divIcon 带有可点击按钮
2. https://react-leaflet.js.org/docs/example-popup-marker/

任何人都可以帮助我。

Answer 1

在使用 leaflet-react 时，我总是建议以更“反应”的方式工作。地图的图层和标记使用正确的标签，而不是进行操作。

当涉及到您的具体问题时，很难确切地说出哪里出了问题。因为我无法访问完整的代码。然而，正如您从代码中看到的那样，divicon 永远无法单击，它只是静态 html。

我建议您检查一下如何使用标记。确保将它们添加为常规反应组件。正如他们在 React Leaflet divIcon with Clickable Button 中所做的那样，然后您可以添加一个单击事件处理程序以使其正常工作。这里需要注意的是，它是 click 而不是 eventHandlers 中的 onClick。

<Marker
  position={[51.505, -0.09]}
  icon={labelIcon}
  eventHandlers={{
    click: () => console.log("Edit clicked"),
  }}
/>

尝试一下，如果您无法让它工作，请分享更多代码。