将函数传递给 React-Leaflet 中的 divIcon

Question

我是 React-Leaflet 的新手（使用 v3），所以如果我遗漏了一些明显的东西，这就是原因。对于我当前的应用程序，我需要能够在地图上旋转标记，这会打开也应该旋转相同角度的弹出窗口。对于一般的标记旋转，我使用了 leaflet-marker-rotation 插件。这不适用于内部放置的弹出组件。

我目前的方法是为我通过传单 divIcon 自定义的弹出窗口使用旋转标记。现在的问题是，我需要在弹出窗口中调用特定功能的按钮。由于 divIcon 的内容是通过 html 而不是 JSX 定义的，所以我还没有设法传递函数。

function CustomPopup({ togglePopup, coords, data}) {
  const description = JSON.parse(data.properties.description);

  const pressButton = () => {
    console.log("pressed close");
        togglePopup()
  };

  const content = divIcon({
    className: "custom-popup",
    html: `
        <button onclick="${pressButton}">Close</button>
        <h3>${data.properties.name}</h3>
    `,
  });

  return (
      <Marker
        position={coords}
        icon={content}
        rotationAngle={180}
        rotationOrigin="top left"
      />
  );
}

点击按钮我得到： Uncaught SyntaxError: Unexpected end of input

甚至可以将函数传递给 divIcon 吗？如果没有，有人对我如何创建一个带有按钮的自定义可旋转弹出窗口有其他想法吗？

Answer 1

我没有测试过是否可以在 html 字符串中应用函数，但我认为这行不通。

您可以创建 html 元素并直接附加点击侦听器：

const pressButton = () => {
    console.log("pressed close");
        togglePopup()
  };

var div = document.createElement('div');

var button = document.createElement('button');
L.DomEvent.on(button, 'click', pressButton);
div.appendChild(button);

var h3 = document.createElement('h3');
h3.innerHTML = data.properties.name;
div.appendChild(h3);


  const content = divIcon({
    className: "custom-popup",
    html: div,
  });

将函数传递给 React-Leaflet 中的 divIcon

Pass function to divIcon in React-Leaflet

reactjs

leaflet

react-leaflet-v3