如何解决React-Leaflet 地图未在地图上呈现数据
来自 App.js 的道具,如下所示
<div className="app__maps">
<h3>I am map</h3>
<Map countries={mapCountries} center={mapCenter} zoom={mapZoom} />
</div>
Map.js 代码如下,数据很好,但是在 showDataOnMap() 里面没有在 MapContainer 中添加圆圈
import React from "react";
import "./Map.css";
import { MapContainer,TileLayer,Marker,Popup,Circle } from "react-leaflet";
const casesTypeColors = {
cases: { hex: "#cc1034",multiplier: 800,},recovered: {hex: "#7dd71d",multiplier: 1200,death: { hex: "#fb4443",multiplier: 2000,};
const showDataOnMap = (data,casesType = "cases") => {
data.map((country) => {
<Circle
center={[country.countryInfo.lat,country.countryInfo.long]}
fillOpacity={0.4}
color={casesTypeColors[casesType].hex}
fillColor={casesTypeColors[casesType].hex}
radius={
Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
}
>
<Popup>
<h4>I am popup</h4>
</Popup>
</Circle>;
});
};
function Map({ countries,casesType,center,zoom }) {
return (
<div className="map">
<MapContainer
center={center}
zoom={zoom}
doubleClickZoom={true}
scrollWheelZoom={true}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{showDataOnMap(countries,casesType)}
</MapContainer>
</div>
);
}
export default Map;
数据生成如下图
请帮助为什么数据没有在我的地图上呈现? 结果应该如下图
解决方法
您没有返回 showDataOnMap
内的任何东西,这就是您看不到任何圆圈的原因。使用 return 关键字或不使用花括号返回循环的结果和函数本身。
const showDataOnMap = (data,casesType = "cases") => {
return data.map((country) => {
return <Circle
center={[country.countryInfo.lat,country.countryInfo.long]}
fillOpacity={0.4}
color={casesTypeColors[casesType].hex}
fillColor={casesTypeColors[casesType].hex}
radius={
Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
}
>
<Popup>
<h4>I am popup</h4>
</Popup>
</Circle>;
});
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。