反应原生地图标记不显示

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

以上是关于反应原生地图标记不显示的主要内容,如果未能解决你的问题,请参考以下文章

如何在反应原生矢量图标中从多个文件导入图标?

我们如何在反应原生版本 .61 中将动画添加到底部选项卡图标

反应原生的电话

反应原生的增量值

如何在反应裁剪组件上显示图标?

反应原生导航在屏幕之间移动