弹出反应传单地图库答案

【问题标题】：Pop up on react leaflet map library弹出反应传单地图库
【发布时间】：2020-07-07 18:36:37
【问题描述】：

我在我的反应应用程序中使用react-leaftlet 地图库https://react-leaflet.js.org/en/，我在地图上渲染了一些标记，当用户单击标记时，会出现一个弹出窗口。当用户点击我的地图区域时，我也想打开一个类似的弹出窗口。我怎样才能做到这一点？以下是我使用弹出窗口呈现标记的代码。（地图使用geojson数据渲染）

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>

【问题讨论】：

标签： javascript reactjs leaflet geojson react-leaflet

【解决方案1】：

使用react-leaflet 的GeoJSON 包装器上的onEachFeature 属性传递一个箭头函数，类似于原生的传单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);
};

【讨论】：