反应地图-js 弹出窗口不会关闭/删除

Question

我成功地在地图上添加了一个弹出窗口，但我不知道如何关闭弹出窗口。(我觉得是个bug？(

我导入了Popup；

import MapGL, { Popup } from 'react-map-gl';

并定义了如下弹出方法；

_renderPopup() {
return(
<Popup
anchor="bottom"
tipSize={10}
longitude={this.state.popupInfo.lon}
latitude={this.state.popupInfo.lat}
closeButton={true}
closeOnClick={true}
>
<div style={style_popup}>
<p> lon = {this.state.popupInfo.lon} </p>
<p> lat = {this.state.popupInfo.lat} </p>
</div>
</Popup>
);
}

我是这样渲染的；

render() {
const {viewport, data, popupInfo} = this.state;
return (
<MapGL
{...viewport}
{...this.props}
onViewportChange={this._onViewportChange.bind(this)}
mapboxApiAccessToken={MAPBOX_TOKEN}
mapStyle={MAP_STYLE}
>
{this._renderPopup()}
</MapGL>
);
}
}

它正确渲染，关闭按钮在弹出窗口上。它就是关不上。有什么想法吗？：/

Answer 1

根据react-map-gl、中Popup组件的最新文档

你可以设置一个挂钩来关闭窗口

const [showPopup, setShowPopup] = useState(true)

然后在onClose事件中调用它

<Popup
longitude={-100}
latitude={40}
anchor="bottom"
onClose={() => setShowPopup(false)}>
You are here
</Popup>)