Reactjs 反应本机地图标记不显示

我正在尝试在地图视图上显示标记。我遵循了这个示例，但是没有一个标记显示在地图上，尽管我可以将地图居中并显示位置指示器。我已经从react本地地图导入了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>
    );
}
}

constructorprops:任何{
超级（道具）；
此.state={
地区:默认地区,，
标记：[
{
协调：{
纬度：37.298984，
经度：-122.050362
},
标题：“最佳地点”，
description:“Description1”，
身份证号码：1
},
{
协调：{
纬度：37.297803，
经度：-122.050037
},
标题：“最佳位置2”，
说明：“说明2”，
身份证号码：2
}
]
};
}
中心位置=（）=>{}；
componentDidMount（）{
这个.centerLocation（）；
}
render（）{
返回(
{this.state.markers.map（（marker:any）=>(
))}
);
}
}

请在渲染功能中添加以下代码，希望对您有所帮助

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>
);

返回(
（this.MapView=MapView）}
style={style.map}
initialRegion={this.state.region}
loadingEnabled={true}
加载指示颜色=“#666666”
loadingBackgroundColor=“#eeeeee”
moveOnMarkerPress={false}
showsUserLocation={true}
showsCompass={true}
showsPointsOfInterest={false}
provider=“谷歌”>
{this.state.markers.map（（marker:any）=>（
}
);

您的标记标记应位于MapView标记内，例如，在将标记标记放入MapView标记内之前，您已关闭MapView标记

<MapView style={styles.map} showsUserLocation={true} region={this.state.region}>
  {this.state.markers.map((marker: any) => (
    <Marker
      key={marker.id}
      coordinate={marker.coordinate}
      title={marker.title}
      description={marker.description}
    />
  ))}
</MapView>

{this.state.markers.map（（marker:any）=>(
))}

我可以知道defaultRegion的值是什么吗？也可以像这样尝试在MapView中添加initialRegion，initialRegion={this.state.region}，并尝试使用MapView.Marker而不是Marker。希望这对您有所帮助。@SandipLipane默认区域是：const defaultRegion={纬度：37，经度：-122，纬度德尔塔：0.003，经度德尔塔：0.003，}；另外，MapView.Marker不起作用，它也给我一个ts错误，属性“Marker”在类型MapView上不存在。由于您在MapView之外添加了MapView.Marker代码，因此它不起作用。我在下面的答案中添加了工作示例，请尝试一下。对我来说，解决方案是替换

这是什么。state.markers…它未定义此状态中有什么？