我正在尝试在我的 MapView 上显示标记。我按照示例进行操作,但没有任何标记显示在 map 上,尽管我可以将 map 居中并显示位置指示器。我从 react-native-maps 导入了 MapView 和 Marker。任何帮助将不胜感激。
constructorprops: any {
super(props);
this.state = {
region: defaultRegion,
markers: [
{
coordinate: {
latitude: 37.298984,
longitude: -122.050362
},
title: "Best Place",
description: "Description1",
id: 1
},
{
coordinate: {
latitude: 37.297803,
longitude: -122.050037
},
title: "Best Place2",
description: "Description 2",
id: 2
}
]
};
}
centerLocation = () => {};
componentDidMount() {
this.centerLocation();
}
render() {
return (
<MapContainer>
<MapView
style={styles.map}
showsUserLocation={true}
region={this.state.region}
/>
<CenterButton centerLocation={this.centerLocation} />
{this.state.markers.map((marker: any) => (
<Marker
key={marker.id}
coordinate={marker.coordinate}
title={marker.title}
description={marker.description}
/>
))}
</MapContainer>
);
}
}
最佳答案
请在渲染函数中添加以下代码,希望对您有所帮助
return (
<View>
<MapView
ref={MapView => (this.MapView = MapView)}
style={styles.map}
initialRegion={this.state.region}
loadingEnabled = {true}
loadingIndicatorColor="#666666"
loadingBackgroundColor="#eeeeee"
moveOnMarkerPress = {false}
showsUserLocation={true}
showsCompass={true}
showsPointsOfInterest = {false}
provider="google">
{this.state.markers.map((marker:any) => (
<MapView.Marker
key={marker.id}
coordinate={marker.coordinate}
title={marker.title}
description={marker.description}
/>
}
</MapView>
<CenterButton
centerLocation={this.centerLocation} />
</View>
);
关于reactjs - react native map 标记不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51118969/