嘿!
我希望通过悬停/鼠标悬停打开弹出窗口。
我试过推荐的,但它仍然只在点击时打开。有人知道缺少了什么吗?
任何帮助都是感激的!
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>
);
}
3条答案
按热度按时间nhn9ugyo1#
不使用
useMemo
和useRef
也可以完成,但仍使用事件处理程序:p5cysglq2#
您需要创建一个自定义组件,然后一种方法是使用
eventHandlers
来处理mouseover
和mouseout
事件,并结合标记ref来分别调用leaflet的原生openPopup
和closePopup
方法。Demo
w7t8yxp53#
在大多数情况下,您可以使用工具提示而不是弹出窗口来获得相同的结果,但问题较少。
例如,这可以帮助您避免抖动问题。
参见https://gis.stackexchange.com/questions/31951/showing-popup-on-mouse-over-not-on-click-using-leaflet下
Fully Stuck Developer
的答案您还可以在以下网址阅读文档/示例:
1.纯瓣叶:http://leafletjs.com/reference-1.3.0.html#tooltip
在您的示例中,只需将
Popup
替换为Tooltip
并删除处理程序: