我希望在 map 上有多个弹出窗口,这些弹出窗口在 map 加载时打开,我从这个答案中得到了适用于一个弹出窗口的示例:
Popup always open in the marker
但是当我有多个弹出窗口时,只有一个在加载时打开,打开一个会关闭另一个 - 在传单文档( http://leafletjs.com/reference-1.0.0.html#popup )中,它建议使用 addLayer 来避免这种情况,但我不知道如何重新创建它在 react 传单中:
const React = window.React;
const { Map, TileLayer, Marker, Popup, MapLayer, LayerGroup } = window.ReactLeaflet;
class SimpleExample extends React.Component {
constructor() {
super();
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13,
};
}
render() {
const position = [this.state.lat, this.state.lng];
const position2 = [this.state.lat - 0.01, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<ExtendedMarker position={position}>
<Popup>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</ExtendedMarker>
<ExtendedMarker position={position2}>
<Popup position={position2}>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</ExtendedMarker>
</Map>
);
}
}
// Create your own class, extending from the Marker class.
class ExtendedMarker extends Marker {
// "Hijack" the component lifecycle.
componentDidMount() {
// Call the Marker class componentDidMount (to make sure everything behaves as normal)
super.componentDidMount();
// Access the marker element and open the popup.
this.leafletElement.openPopup();
}
}
window.ReactDOM.render(<SimpleExample />, document.getElementById('container'));
最佳答案
任何在这个问题上遇到困难的人,在更高版本的传单中(例如:1.0.0+)有一个选项 autoClose
在Popup
的选项中,您可以将其设置为false
以显示多个弹出窗口。
<Map center={position} zoom={this.state.zoom}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<ExtendedMarker position={position}>
<Popup autoClose={false}>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</ExtendedMarker>
<ExtendedMarker position={position2}>
<Popup position={position2} autoClose={false}>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</ExtendedMarker>
</Map>
关于react-leaflet - 多个弹出窗口始终打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39389943/