反应原生地图标记不显示
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了反应原生地图标记不显示相关的知识,希望对你有一定的参考价值。
我正在尝试在MapView上显示标记。我按照这个例子,但没有一个标记显示在地图上,虽然我可以将地图居中并显示位置指示器。我从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>
);
以上是关于反应原生地图标记不显示的主要内容,如果未能解决你的问题,请参考以下文章