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

发布于 2025-01-11 01:08:31 字数 992 浏览 0 评论 0原文

我是 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"
      />
  );
}

单击按钮我得到： 未捕获的语法错误：输入意外结束

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

原文

I'm new to React-Leaflet (using v3), so if I'm missing something obvious that's why.
For my current app I need to be able to have rotated markers on the map, which open up popups that should also be rotated by the same angle. For the general marker rotation I used the leaflet-marker-rotation plugin. This does not apply on the inside placed popup component tho.

My current approach was then to use a rotated marker for the popup that I customise via the leaflet divIcon. Problem now is, that I need buttons inside that popup which call specific functions. Since the content of the divIcon is defined via html and not JSX I haven't managed yet to pass a function.

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"
      />
  );
}

On button click I get:
Uncaught SyntaxError: Unexpected end of input

Is it even possible to pass a function to a divIcon?
If not, does anyone has another idea on how I could create a custom rotatable popup with buttons inside?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赠我空喜 2025-01-18 01:08:31

我还没有测试是否可以在 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,
  });

I haven't tested if it is possible to apply a function in a html string but I don't think that this will work.

You can create the html elements and append the click listener directly:

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,
  });

回复收藏 0 原文

~没有更多了~