Question

这可能是基本的，但我正在使用JS Mapbox和React Native Mapbox之间的文档绊倒。我通过import Mapbox from '@mapbox/react-native-mapbox-gl';将mapbox导入到项目中来创建新的地图实例，然后在render（）函数中通过以下方式加载地图：

<View style={container}>
    <Mapbox.MapView
        styleURL={Mapbox.StyleURL.Light}
        zoomLevel={12}
        centerCoordinate={[lat, lng]}
        style={styles.container}
        showUserLocation
    >
    {this.renderAnnotations()}
    </Mapbox.MapView>
</View>

renderAnnotations()函数我定义如下：

renderAnnotations() {
        return this.state.stations.map((station, index) =>
          <TouchableHighlight onPress={this._map.flyTo.bind(this, station)} key={index}>
            <View ref={component => this._root = component}>
              <StationPoint key={station.id} station={station} />
            </View>
          </TouchableHighlight>
        );
      }

目标是使用相应的flyTo onPress事件在地图上渲染点。地图和这些点渲染完全正常，但onpress事件返回：

错误＆＃34;无法读取属性＆＃39; flyTo＆＃39;未定义＆＃34;

在this教程中，它建议您可以使用this._map访问地图。这是正确的，我犯了不同的错误吗？或者是否有另一种访问地图方法的方法？非常感谢任何帮助！

Answer 1

找出答案，以防它帮助别人。我没有在MapView上定义ref属性。它应该有一个定义为this._map的引用，如下所示：

<View style={container}>
    <Mapbox.MapView
        ref={(c) => this._map = c}
        styleURL={Mapbox.StyleURL.Light}
        zoomLevel={12}
        centerCoordinate={[lat, lng]}
        style={styles.container}
        showUserLocation
    >
    {this.renderAnnotations()}
    </Mapbox.MapView>
</View>

Mapbox React Native无法访问地图的方法

1 个答案: