反应原生地图移动坐标变化答案

【问题标题】：React native maps move to coordinate change反应原生地图移动坐标变化
【发布时间】：2020-03-06 11:49:01
【问题描述】：

在我的应用程序中，我有谷歌地图。它的实现如下所示。

<MapView style={[styles.mapStyle, { flex: 1, width: this.state.mapWidth }]}
                            initialRegion={{
                                latitude: this.state.latitude,
                                longitude: this.state.longitude,
                                latitudeDelta: 0.1,
                                longitudeDelta: 0.1,
                            }}
                            provider={PROVIDER_GOOGLE}
                            onPress={this.onMapPress.bind(this)}
                            showsUserLocation={true}
                            followsUserLocation={true}
                            showsMyLocationButton={true}
                            showsCompass={true}
                            showsTraffic={true}
                            toolbarEnabled={true}
                            onMapReady={() => this.setState({ width: width - 1 })}
                        >
                            <Marker draggable
                                coordinate={{
                                    latitude: this.state.latitude,
                                    longitude: this.state.longitude,
                                }}
                                onDragEnd={(e) => this.setState({ x: e.nativeEvent.coordinate })}
                            />
                            <Circle
                                center={{
                                    latitude: this.state.latitude,
                                    longitude: this.state.longitude,
                                }}
                                radius={this.state.radius}
                                fillColor='rgba(253, 48, 4,0.5)'
                                strokeColor='rgba(253, 48, 4,1)'
                            />
   </MapView>

当我点击一个按钮时，我会更改地图区域的状态值。

changeRegion(){
    this.setState({ latitude: 6.86, longitude: 6.86 });
}

这成功地改变了地图标记的位置。

我的问题是，地图没有移动到选定的位置。我怎样才能做到这一点？

【问题讨论】：

标签： react-native react-native-maps

【解决方案1】：

为您的地图创建参考

const mapRef = React.createRef();

将 ref 传递给您的地图

<Map
  ref={mapRef}
  // Rest of your props
/>

修改你的函数

changeRegion(){
  const latitude = 6.86;
  const longitude = 6.86;
  this.setState({ latitude, longitude });
  mapRef.current.animateToRegion({
    latitude,
    longitude,
    latitudeDelta: 0.1,
    longitudeDelta: 0.1
  })
}

【讨论】：

【解决方案2】：

根据@Dan 的回答，如果该回答不适合您，请稍作修改：

changeRegion(){
  const targetLatitude = 6.86;
  const targetLongitude = 6.86;
  this.setState({ latitude, longitude });

  mapRef.current.animateToRegion({
    latitude: targetLatitude,
    longitude: targetLongitude,
    latitudeDelta: 0.1,
    longitudeDelta: 0.1
  })
}

【讨论】：