reactjs React瓣叶鼠标悬停/悬停弹出窗口

hivapdat  于 2022-12-22  发布在  React
关注(0)|答案(3)|浏览(283)

嘿!
我希望通过悬停/鼠标悬停打开弹出窗口。
我试过推荐的,但它仍然只在点击时打开。有人知道缺少了什么吗?
任何帮助都是感激的!

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

nhn9ugyo1#

不使用useMemouseRef也可以完成,但仍使用事件处理程序:

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

p5cysglq2#

您需要创建一个自定义组件,然后一种方法是使用eventHandlers来处理mouseovermouseout事件,并结合标记ref来分别调用leaflet的原生openPopupclosePopup方法。

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

Demo

w7t8yxp5

w7t8yxp53#

在大多数情况下,您可以使用工具提示而不是弹出窗口来获得相同的结果,但问题较少。
例如,这可以帮助您避免抖动问题。
参见https://gis.stackexchange.com/questions/31951/showing-popup-on-mouse-over-not-on-click-using-leafletFully Stuck Developer的答案
您还可以在以下网址阅读文档/示例:
1.纯瓣叶:http://leafletjs.com/reference-1.3.0.html#tooltip

  1. React瓣叶: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>
    );
}

相关问题