如何在MapView中显示多个标记

Question

我想在地图上显示React Native上MapView中多个纬度和经度的多个标记。我通过从API获取数据来获取纬度和经度。现在，我如何使用这些数据在地图中显示我的React Native for All位置。

我的代码是：

useEffect(() => {
devices?.map(async (id) => {
await fetch(`https://www.schools.com/sc/api/${id}`, requestOptions)
.then((response) => response.json())
.then(function (response) {
return setDataLoc([parseFloat(response.data?.latitude), parseFloat(response.data?.longitude)])
})
.catch(function (error) {
console.log(error);
});
})
}, [])

const [curLoc, setCurLoc] = useState({
latitude: 5.055252,
longitude: 115.9456243,
latitudeDelta: 0.004757,
longitudeDelta: 0.006866,
})
return (
<View style={styles.container}>
<MapView style={styles.map}
initialRegion={curLoc}>
{devices?.map((val) => {
return (<Marker
coordinate={val.dataLoc}
pinColor="black">
</Marker>)
})}
</MapView>
</View>
);

现在我有更多的纬度和经度可以显示。我在获取类似的东西后获取数据

输出：

[5.7689,110.5677]
[5.2345,111.5623]
[5.6652,112.7890]

执行此操作后，我无法在地图上查看任何标记。

所以我想在地图视图中显示这3个纬度和经度的位置。

如何使用我可以在地图中显示的标记进行所有定位。

Answer 1

我认为您的错误来自于您在标记组件上提供的道具坐标的错误类型，坐标应该是这样的：{ latitude : number , longitude : number }

import MapView, { Marker } from 'react-native-maps';

const [curLoc, setCurLoc] = useState({
latitude: 5.055252,
longitude: 115.9456243,
latitudeDelta: 0.004757,
longitudeDelta: 0.006866,
})
marketToDisplay = [
{latitude: 5.7689, longitude: 110.5677},
{latitude: 5.2345, longitude: 111.5623},
{latitude: 5.6652, longitude: 112.7890},
]

render() {
return (
<View style={styles.container}>
<MapView style={styles.map} initialRegion={curLoc}>
marketToDisplay.map((val, index) => {
<Marker
key={index}
coordinate={val}
/>
}
<Marker coordinate={this.state.coordinate} />
</MapView>
</View>
);
}