Auto open markers popup on react-leaflet map

为君一笑 提交于 2019-12-12 19:29:57

问题


I use some markers on react-leaflet map to show various text.
But I can not find a flag for the autoOpen tooltip.

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

How can I do the same on react_leflet


回答1:


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



来源:https://stackoverflow.com/questions/48171437/auto-open-markers-popup-on-react-leaflet-map

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!