onUserLocationChange更改React Native Maps区域

时间:2018-08-22 22:34:56

标签: javascript google-maps react-native

我正在使用“ react-native-maps”中的MapView

我无法显示“ showsMyLocationButton”,所以我正在实现自己的。

我想不使用React Native的地理位置来执行此操作,因为我发现它比react-native-maps prop showsUserUser慢。我使用onUserLocationChange事件返回坐标。但是,当触发onUserLocationChange事件并设置包含userLocation的状态时,它将自动更新区域,而无需我明确要求它。

这是我的代码:

display_my_location(coordinate){
  alert("region changed")
  this.setState({
    region: {
      latitude: coordinate.latitude,
      longitude: coordinate.longitude,
      latitudeDelta: 0.004,
      longitudeDelta: 0.004
    },
  });
}

setUserLocation(coordinate){
  //alert("User location changed MAP SHOULDNT MOVE")
  this.setState({
    userLocation: {
      latitude: coordinate.latitude,
      longitude: coordinate.longitude,
      latitudeDelta: 0.004,
      longitudeDelta: 0.004
    }
  })
}

<MapView
      style={styles.map}
      showsMyLocationButton={true}
      onUserLocationChange={locationChangedResult => this.setUserLocation(locationChangedResult.nativeEvent.coordinate)}
      initialRegion={this.state.region_amon}
      showsUserLocation={true}
      region={this.state.region}
      mapType={this.state.map_style}
      showsCompass = {true}
      showsMyLocationButton={true}
      chacheEnabled={false}
      zoomEnabled={true}

1 个答案:

答案 0 :(得分:2)

我相信您可以通过从region完全删除MapView道具来解决此问题。如果您需要以编程方式更改地图的边框,则可以在地图上附加ref并使用此处的适当MapView方法在componentDidUpdate中进行更新:

https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md#methods