Всегда открываются несколько всплывающих окон

Я хотел бы, чтобы на карте было несколько всплывающих окон, которые открываются при загрузке карты, у меня есть пример из этого ответа, работающий для одного всплывающего окна:

Всплывающее окно всегда открывается в маркере

Но когда у меня несколько всплывающих окон, только одно открывается при загрузке, и открытие одного закрывает другое - в документации-буклете (http://leafletjs.com/reference-1.0.0.html#popup) он предлагает использовать addLayer, чтобы избежать этого, но я не могу понять, как воссоздать это в листке-реакции:

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='&copy; <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'));

https://jsfiddle.net/37uo2cp5/


person SteveH    schedule 08.09.2016    source источник


Ответы (1)


Любой, кто сталкивается с этим вопросом, в более поздней версии листовки (например, 1.0.0+) есть опция _ 1_ в параметрах Popup, которые можно установить на false для отображения нескольких всплывающих окон.

<Map center={position} zoom={this.state.zoom}>
    <TileLayer
      attribution='&copy; <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>
person Vandesh    schedule 08.11.2019