弹出反应单张地图库 [英] Pop up on react leaflet map library
问题描述
我正在使用react-leaftlet
地图库 https://react-leaflet.js.org /en/在我的react应用程序中,并且我已经在地图上绘制了一些标记,并且当用户单击标记时,会出现一个弹出窗口.当用户也单击我的地图区域时,我也想打开一个类似的弹出窗口.我怎样才能做到这一点?以下是我的代码,用于使用弹出窗口渲染标记. (地图使用geojson数据呈现)
I'm using react-leaftlet
map library https://react-leaflet.js.org/en/ in my react app and i have rendered some markers on the map and when a user clicks on a marker, a pop up appears. I want to open a similar popup when a user clicks on the district of my map as well. How can i do that? The following is my code to render the markers with popup. (The map is rendered using geojson data)
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>
推荐答案
在react-leaflet
的GeoJSON
包装器上使用onEachFeature
道具来传递箭头函数,类似于本机的传单onEachFeature
Use onEachFeature
prop on react-leaflet
's GeoJSON
wrapper to pass an arrow function similarly to native's leaflet onEachFeature
function to be able to generate a popup when clicking on each district.
<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);
};
这篇关于弹出反应单张地图库的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!