在地图反应原生中显示我的位置

Question

我是 React-Native 新手

我已经创建了一个谷歌地图，但我希望当我打开我的应用程序时，它会首先显示我的位置。我该怎么做？

这是我的代码 导出默认类 GoogleMapApi 扩展组件 { 状态 = { 地图区域：空， 最后纬度：空， 最后长：空， }

  componentDidMount() {
    this.watchID = navigator.geolocation.watchPosition((position) => {       
      let region = {
        latitude:       position.coords.latitude,
        longitude:      position.coords.longitude,
        latitudeDelta:  0.00922*1.5,
        longitudeDelta: 0.00421*1.5
      }
      this.onRegionChange(region, region.latitude, region.longitude);
    });
  }
  onRegionChange(region, lastLat, lastLong) {
    this.setState({
      mapRegion: region,
      // If there are no new values set use the the current ones
      lastLat: lastLat || this.state.lastLat,
      lastLong: lastLong || this.state.lastLong
    });
  }

和

componentWillUnmount() {
        navigator.geolocation.clearWatch(this.watchID);
      }
      onMapPress(e) {
        console.log(e.nativeEvent.coordinate.longitude);
        let region = {
          latitude:       e.nativeEvent.coordinate.latitude,
          longitude:      e.nativeEvent.coordinate.longitude,
          latitudeDelta:  0.00922*1.5,
          longitudeDelta: 0.00421*1.5
        }
        this.onRegionChange(region, region.latitude, region.longitude);
      }
      render() {
        return (
          <View style={{flex: 1}}>
            <MapView
              style={styles.map}
              region={this.state.mapRegion}
              showsUserLocation={true}
              followUserLocation={true}
              onRegionChange={this.onRegionChange.bind(this)}
              onPress={this.onMapPress.bind(this)}>
              <MapView.Marker
                coordinate={{
                  latitude: (this.state.lastLat + 0.00050) || -36.82339,
                  longitude: (this.state.lastLong + 0.00050) || -73.03569,
                }}>
                <View>
                  <Text style={{color: '#000'}}>
                    { this.state.lastLong } / { this.state.lastLat }
                  </Text>
                </View>
              </MapView.Marker>
            </MapView>
          </View>
        );
      }
    }

Answer 1

要获取您当前的位置，您可以使用 react-native 的地理位置库，其文档在这里（地理位置）。

`static getCurrentPosition(geo_success, geo_error?, geo_options?)`

此处提供上述方法的文档。

您必须使用此方法获取当前位置坐标，并使用这些坐标在地图上查看您的位置。