0

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

然后，我当前的方法是为我通过传单 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 吗？如果没有，是否有人对如何创建带有按钮的自定义可旋转弹出窗口有其他想法？

4

1 回答 1

0

我还没有测试是否可以在 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,
  });
于 2022-02-28T12:22:24.427 回答