Question

我正在创建一个带有大主地图的网站。单击制造商时，我有一些带有弹出标记的标记。但是现在，我想用一个外部事件打开弹出窗口。我使用redux来维持标记状态，但我想根据制造商的状态来打开或不显示弹出窗口。

react-leaflet中的弹出式组件上没有open或isOpen属性，如下所示：

   <Marker position={[this.props.lat, this.props.lon]}>
        <Popup open={this.state.isOpen} >
            The popup content
        </Popup>
    </Marker>

和Leaflet API不能提供更好的解决方案...

我已经成功添加了事件监听器onMouseOver和ref，如下所示，但仅此而已。

class Poi extends Component{
    render(){
        return (
            <Marker position={[this.props.lat, this.props.lon]}
                    ref={marker=> { this.marker = marker }} 
                    onMouseOver={() => {s.marker.leafletElement.bindPopup('Popup content').openPopup();}}>
            </Marker>
    )
}

谢谢您的帮助！ PS：我真的很新，所以请放纵：-）

Answer 1

嗯，您是否要将标记与弹出窗口关联起来？就像应该点击一个标记打开一个弹出窗口一样？如果答案是否定的，那么“自动”打开弹出窗口的最简单方法就是停止将其与标记关联。

代替：

<Marker position={[this.props.lat, this.props.lon]}>
    <Popup>
        The popup content
    </Popup>
</Marker>

这样做：

<Marker position={[this.props.lat, this.props.lon]}/>
<Popup position={[this.props.lat, this.props.lon]}>
    The popup content
</Popup>

如果您仍想在单击标记时触发弹出窗口打开，那么我认为最好的选择可能是扩展react-leaflet的Popup类。如果您在摆弄小提琴时提供了当前问题的最小可行示例，那么我可以为您提供帮助。

Answer 2

我终于找到了一个快速且可能肮脏的技巧：

class Poi extends Component{
    componentDidUpdate(prevProps, prevState, snapshot) {
        if(this.props.isOpen === true){
            this.marker.leafletElement.bindPopup('popup content').openPopup()
        }
    }

    render(){
        return (
            <Marker position={[this.props.lat, this.props.lon]} ref={marker => { this.marker = marker }}>
            </Marker>
        )
    }
}

但是，即使许多元素被标记为open，并且我也失去了单击标记的能力……，它还是只能打开一个弹出窗口：：/

来自redux的道具状态打开弹出窗口

2 个答案: