反应传单地图上的自动打开标记弹出窗口

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 上做同样的事情

Ale*_*rij 6

如果仅用于文本,则可以使用 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

  • open={this.state.isOpen} 似乎在工具提示标记内不起作用。 (2认同)