我正在使用react-leaflet
map 库https://react-leaflet.js.org/en/在我的 react 应用程序中,我在 map 上渲染了一些标记,当用户单击标记时,会出现一个弹出窗口。当用户单击我的 map 的区域时,我也想打开一个类似的弹出窗口。我怎样才能做到这一点?以下是我用弹出窗口渲染标记的代码。 ( map 使用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>
最佳答案
使用onEachFeature
支持react-leaflet
的GeoJSON
包装器传递类似于 native 传单的箭头函数 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);
};
关于javascript - 弹出react传单图库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60878939/