Ste*_*sic 3 leaflet reactjs react-leaflet
我在 react-leaflet 地图上使用了一些标记来显示各种文本。
但是我找不到 autoOpen 工具提示的标志。
我得到 (position, children, onOpen, onClose) 作为可用属性。
render() {
return (
<div className={'ShapeLayer'}>
{
this.shapes.map(shape => {
return (
<Marker key={shape['id']} position={shape['coordinates']} draggable={false} opacity={1}>
<Popup>
<span>{shape['text']}</span>
</Popup>
</Marker>
);
})
}
</div>
)
}
Run Code Online (Sandbox Code Playgroud)
这是通过本机传单上的此代码完成的
var marker = L.marker(shapess[i]['coordinates'], {
opacity: 0.01
}).bindTooltip(shapess[i]['text'],
{
permanent: true,
className: "shapesText" + i,
offset: [0, 0],
direction: "center"
}
).openTooltip().addTo(mymap);
Run Code Online (Sandbox Code Playgroud)
我如何在 react_leflet 上做同样的事情
如果仅用于文本,则可以使用 Tooltip 而不是 Popup,然后permanent在 Tooltip 上使用属性。
<Marker key={shape['id']} position={shape['coordinates']} draggable={false} opacity={1}>
<Tooltip permanent>
<span>{shape['text']}</span>
</Tooltip>
</Marker>
Run Code Online (Sandbox Code Playgroud)
这是更多示例的来源:
react-leaflet/example/components/tooltip.js