onUserLocationChange 更改 React Native Maps 区域

Est*_*zio 5 javascript google-maps react-native

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

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

我想在不使用 React Native 的地理定位的情况下执行此操作,因为我发现它比 react-native-maps propshowUserLocation 慢。我使用返回坐标的 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}
Run Code Online (Sandbox Code Playgroud)

小智 2

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

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