问题描述
我创建了一个 react FC 并在“useEffect”中调用了一个 rest 服务,它应该接收一个 MapPoints 数组。 对于每个地图点,我想创建一个“标记”,但它不起作用.. 如果我添加一个“静态”地图点列表,它会起作用..
地图组件:
return isLoading
? <h1>Data are loading...</h1>
:
<MapContainer center={[47.217324,13.097555]} zoom={5} scrollWheelZoom={false}>
<TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<MapMarkers mapPoints={data}/>
</MapContainer>
地图标记组件:
export const MapMarkers : React.FC<Props> = ({mapPoints}) => {
const markers = mapPoints.map((x,index) => {
console.log(x);
<Marker key={index} position={{lat: x.Latitude,lng: x.Longitude}}>
<Popup>
<span>test</span>
</Popup>
</Marker>
})
return <Fragment>{markers}</Fragment>
}
有什么想法吗?
解决方法
我不确定你的错误在哪里,但我可以提供一个例子让你看看它是否有效
在地图合成中:
const [data,setData] = useState([]);
useEffect(() => {
fetch("https://api-adresse.data.gouv.fr/search/?q=paris&type=street")
.then((response) => response.json())
.then((response) => {
// console.log(response);
setData(response.features);
});
},[]);
... rest of the code as yours
并且在标记组合中与您的完全相同,只是我更改了位置值,因为它与您的 api 不同,并且还在标记函数中添加了 return 内部标记函数,您可以在其中映射标记
const MapMarkers = ({ mapPoints }) => {
const markers = mapPoints.map((x,index) => {
// console.log(x);
const {
geometry: { coordinates }
} = x;
return (
<Marker
key={index}
position={{ lat: coordinates[1],lng: coordinates[0] }}
icon={icon}
>
<Popup>
<span>test</span>
</Popup>
</Marker>
);
});
return markers;
};
,
终于找到问题了。。 我正在使用打字稿,但我在 MapPoint 对象中遇到了问题。 所以 x.Latitude 无法识别..