Выскочить на библиотеку карт реагирования листовки - PullRequest
Новая
       55

Выскочить на библиотеку карт реагирования листовки

0 голосов
/ 27 марта 2020

Я использую react-leaftlet библиотеку карт https://react-leaflet.js.org/en/ в своем приложении реакции, и я нарисовал несколько маркеров на карте, и когда пользователь нажимает на маркер, появляется всплывающее окно. Я хочу открыть аналогичное всплывающее окно, когда пользователь нажимает на район моей карты. Как я могу это сделать? Ниже приведен мой код для отображения маркеров с помощью всплывающих окон. (Карта отображается с использованием данных geo json) 

markerHospitalRender() {
    return this.props.hospitalData.map(item => {
      const position = [item.district_lat, item.district_long];
      return (
        <Marker position={position} icon={this.grenIcon}>
          <Popup>
            <span style={{ display: "block" }}>{item.name}</span>
          </Popup>
        </Marker>
      );
    });
  }

<Map
   className="map"
   center={center}
>
   <GeoJSON
      data={geo}
      style={this.hospital_style}
   />
   {this.markerHospitalRender()}
</Map>

1 Ответ

1 голос
/ 27 марта 2020

Используйте onEachFeature prop для react-leaflet 'GeoJSON оболочки, чтобы передать функцию стрелки, аналогично буклету натива onEachFeature function , чтобы иметь возможность генерировать всплывающее окно при нажатии на каждый район. 

<GeoJSON
      data={geo}
      style={this.hospital_style}
      onEachFeature={onEachFeature}
   />

const onEachFeature = (feature, layer) => {
  const popupContent = `District Code: ${feature.properties.electoralDistrictCode} <br> District: ${feature.properties.electoralDistrict}`;
  if (feature.properties && feature.properties.popupContent) {
    popupContent += feature.properties.popupContent;
  }
  layer.bindPopup(popupContent);
};
...