在反应传单地图上自动打开标记弹出窗口 [英] Auto open markers popup on react-leaflet map
本文介绍了在反应传单地图上自动打开标记弹出窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在react-leaflet地图上使用了一些标记来显示各种文本.
但是我找不到自动打开工具提示的标志.
I use some markers on react-leaflet map to show various text.
But I can not find a flag for the autoOpen tooltip.
我获得(位置,子项,onOpen,onClose)作为可用属性.
I get (position, children, onOpen, onClose) as available attributes.
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>
)
}
这是通过本机传单上的代码完成的
This is done with this code on native leaflet
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);
如何在react_leflet上做同样的事情
How can I do the same on react_leflet
推荐答案
如果仅用于文本,则可以使用工具提示而不是弹出窗口,然后在工具提示上使用permanent
属性.
You can use Tooltip instead of a Popup if it's just for text and then use permanent
attribute on the Tooltip.
<Marker key={shape['id']} position={shape['coordinates']} draggable={false} opacity={1}>
<Tooltip permanent>
<span>{shape['text']}</span>
</Tooltip>
</Marker>
以下是更多示例的来源:
Here is the source for more examples :
react-leaflet/example/components/tooltip.js
这篇关于在反应传单地图上自动打开标记弹出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文