React Leaflet 鼠标悬停弹出窗口。

Question

你好！

我希望我的弹出窗口可以通过鼠标悬停/悬浮来打开。

我尝试了推荐的方法，但它仍然只能在单击时打开。有人知道缺少什么吗？

非常感谢帮助！

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L from 'leaflet';

const Map = () => {
    const renderIcons = () => {
    return(
        <Marker
         position = {[latitude, longitude]}
         icon     = {getIcon(markerType)}
         onMouseOver = {event => event.target.openPopup()}
        >
            <Popup>
             Hello 
            </Popup>
        </Marker>
     );
});
return(
    <MapContainer ...>
       <TileLayer .../>
       {renderIcons()}
    </MapContainer>
 );
}

- piah

Answer 1

不使用useMemo和useRef，也可以使用事件处理程序完成操作：

<Marker
  position={[latitude, longitude]}
  icon={getIcon(markerType)}
  eventHandlers={{
    mouseover: (event) => event.target.openPopup(),
  }}
>
  <Popup>Hello</Popup>
</Marker>;

- Disco

Answer 2

你需要创建一个自定义组件，然后可以使用eventHandlers来处理mouseover和mouseout事件，结合标记参考(marker ref)调用leaflet的本机openPopup和closePopup方法。

const RenderIcons = () => {
  const markerRef = useRef();

  const eventHandlers = useMemo(
    () => ({
      mouseover() {
        if (markerRef) markerRef.current.openPopup();
      },
      mouseout() {
        if (markerRef) markerRef.current.closePopup();
      }
    }),
    []
  );

  return (
    <Marker
      ref={markerRef}
      position={position}
      icon={icon}
      eventHandlers={eventHandlers}
    >
      <Popup>Hello</Popup>
    </Marker>
  );
}; 

演示

- kboul

---

不幸的是，这个无法工作。我收到了错误提示：“useMemo”和“useRef”不能在回调函数中调用。 - piah

你有检查过演示吗？它没有错误并且按预期工作。如果出现错误，则应相应地修改代码以检查问题所在。<RenderIcons /> 组件应该放在 Map 组件之外，而不应该像你现在这样成为回调函数。 - kboul

Answer 3

在大多数情况下，您可以使用工具提示而不是弹出窗口来获得相同的结果，同时减少问题。

例如，这可以帮助您避免抖动问题。

请参阅https://gis.stackexchange.com/questions/31951/showing-popup-on-mouse-over-not-on-click-using-leaflet下Fully Stuck Developer的答案。

您还可以在以下文档/示例中阅读：

1. Pure leaflet: http://leafletjs.com/reference-1.3.0.html#tooltip
2. React leaflet: https://react-leaflet.js.org/docs/example-tooltips/

---

在您的情况下，只需将 Popup 替换为 Tooltip 并删除处理程序即可：

import React from "react";
import { MapContainer, TileLayer, Marker, Tooltip } from "react-leaflet";
import L from 'leaflet';

const Map = () => {
    const renderIcons = () => {
        return (
            <Marker
                position={[latitude, longitude]}
                icon={getIcon(markerType)}
            >
                <Tooltip>
                    Hello
                </Tooltip>
            </Marker>
        );
    });
    return (
        <MapContainer ...>
            <TileLayer .../>
            {renderIcons()}
        </MapContainer>
    );
}

- Ziv Ronen