反应原生地图标记不显示答案

【问题标题】：react native maps markers not displaying反应原生地图标记不显示
【发布时间】：2018-12-09 15:59:10
【问题描述】：

我正在尝试在我的 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>
    );
}
}

【问题讨论】：

我可以知道defaultRegion的值是多少吗？也尝试像这样在 MapView 中添加 intialRegion，initialRegion={this.state.region} 并尝试使用 MapView.Marker 而不是 Marker。希望对您有所帮助。
@SandipLipane 默认区域为： const defaultRegion = { latitude: 37, longitude: -122, latitudeDelta: 0.003, longitudeDelta: 0.003, };此外，MapView.Marker 不起作用，它还给我一个 ts 错误，即 MapView 类型上不存在 Property 'Marker'。
因为您在 MapView 之外添加了 MapView.Marker 代码，因此它不起作用。我在下面的答案中添加了工作示例，请尝试。
对我来说，解决方案是将<Marker替换为<MapView.Marker

标签： reactjs google-maps react-native location marker

【解决方案1】：

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

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.state.markers....未定义这个状态有什么？

【解决方案2】：

您的 Marker 标签应该在 MapView 标签内，例如，在将您的 Marker 标签放入之前，您已经关闭了 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>

【讨论】：