onRegionChangeComplete函数使用react本地映射多次调用

时间:2017-12-15 12:15:12

标签: react-native react-native-android react-native-ios react-native-maps

我想在地图中移动某个位置时更改我的初始区域,我使用了onRegionChangeComplete功能,但它一次调用两次或三次。

这是我的代码:

onRegionChangeComplete(region) {
    if(!this.state.initialRegionChange){
      console.log("changeRegion:"+JSON.stringify(region))
      var initialRegion = {
        latitude: region.latitude,
        longitude :region.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }
      var lat = parseFloat(region.latitude)
      var lang = parseFloat(region.longitude)
    }else{
      this.setState({
        initialRegionChange:false
      })
    }
  }

render(){
  return(
    <MapView
          ref="map"
          style={styles.map}
          initialRegion={this.state.region}
          provider={MapView.PROVIDER_DEFAULT}
          zoomEnabled={true}
          onRegionChangeComplete={this.onRegionChangeComplete.bind(this)}
          pitchEnabled={true}
          showsCompass={true}
          showsBuildings={true}
          showsUserLocation={true}
          showsTraffic={true}
          showsIndoors={true}
          />
    )
}

请告诉我如何解决此问题。

任何帮助都非常感激。

这是我关注的模块链接。 https://github.com/react-community/react-native-maps

3 个答案:

答案 0 :(得分:1)

这可能是一个古老的问题,但是我将提供对我有用的参考。在我的情况下,只是区域的精度更改了onRegionChangeComplete,这使地图认为该区域已更改。为了解决这个问题,我只是将输入区域与先前设置的区域进行了比较,但是在比较中将坐标的小数位数限制为6。像这样:

onRegionChange = (region) => {
    if(region.latitude.toFixed(6) === this.state.region.latitude.toFixed(6)
      && region.longitude.toFixed(6) === this.state.region.longitude.toFixed(6)){
        return;
    }

    this.setState({region});
}

答案 1 :(得分:1)

使用 react-native-maps version => v0.28.0,这个问题在 iOS 中不存在,

对于安卓:-

onRegionChangeComplete 在区域改变时调用一次,例如当用户完成移动地图时。第二个参数是一个包含有关移动的更多详细信息的对象。 isGesture 属性指示移动是来自用户 (true) 还是动画 (false)。注意:isGesture 仅受 Google 地图支持。

onRegionChangeComplete={(region, gesture) => {
              if (Platform.OS === 'android') {
                if (gesture.isGesture) {
                  onRegionChange(region);
                }
              } else {
                onRegionChange(region);
              }
            
          }}

答案 2 :(得分:-1)

react-native-maps这是一个记录在案的问题,甚至还提交了一个拉取请求来修复它:https://github.com/react-community/react-native-maps/pull/1597。您可以立即将拉取请求合并到react-native-maps的本地副本中,或者等待它被释放。我建议将你的支持添加到PR中,以便更多地关注它并使其更快地合并。我知道这不是你的问题的解决方案,但是目前你的源代码中没有任何东西可以修复它 - 你需要库本身来改变。希望这有帮助!