React native maps移动到坐标更改

vmdwslir 于 2023-04-22 发布在 React

关注(0)|答案(3)|浏览(200)

在我的应用程序，我有谷歌Map.它是实现如下.

<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>

当我点击一个按钮时，我会改变Map区域的状态值。

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

这成功地改变了Map的标记的位置。
我的问题是，Map不移动到选定的位置。我如何才能实现这一点？

react-native

来源：https://stackoverflow.com/questions/60563490/react-native-maps-move-to-coordinate-change

3条答案

按热度按时间

nwwlzxa71#

为Map创建参照

const mapRef = React.createRef();

将ref传递到Map

<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
  })
}

赞(0）回复(0）举报 2023-04-22

jqjz2hbq2#

基于@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
  })
}

赞(0）回复(0）举报 2023-04-22

8gsdolmq3#

功能组件使用useRef

const mapRef = useRef(null);
 const [region, setRegion] = useState({
    latitude: LATITUDE,
    longitude: LONGITUDE,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  });

    const onRegionCHange=()=>{
      mapRef?.current?.animateToRegion({
            latitude: your desired latitude,
            longitude: your desired longitude,
                latitudeDelta: LATITUDE_DELTA,
              longitudeDelta:LONGITUDE_DELTA,
            });
    }
        <MapView
                ref={mapRef}
                onRegionChangeComplete={onRegionChange}
                provider={PROVIDER_GOOGLE} // remove if not using Google Maps
                style={styles.map}
                initialRegion={region}
                zoomEnabled={true}
                maxZoomLevel={zoom + 1}
                minZoomLevel={zoom + 0.5}
                scrollEnabled={true}
                showsScale={true}
                zoomControlEnabled={true}
                zoomTapEnabled={true}
                mapType={'satellite'}
                rotateEnabled={true}
        
                loadingEnabled={true}
                showsCompass={true}>
        </MapView>

赞(0）回复(0）举报 2023-04-22

我来回答

React native maps移动到坐标更改

3条答案

功能组件使用useRef

相关问题

热门标签

最新问答