Question

我正在使用反应原生地图聚类的MapView和反应原生地图的标记和标注。我无法使用animateToRegion。它显示了this.mapView.animateToRegion is not a function

 <MapView
 ref={map=>{mapView = map}}
 provider='google'
 clustering={true}
 onClusterPress={this.onPressCluster}
 region={this.state.region}
 onRegionChange={this.onRegionChange}
 onRegionChangeComplete={this.onRegionChangeComplete}
 style={styles.map}
 showsUserLocation={true}
 followUserLocation={true}
 zoomEnabled={true}
 ScrollEnabled={true}
 showsBuildings={true}
 showsMyLocationButton={false}/>

Answer 1

animate(){
    let r = {
        latitude: 42.5,
        longitude: 15.2,
        latitudeDelta: 7.5,
        longitudeDelta: 7.5,
    };
    this.mapView.root.animateToRegion(r, 2000);
}

render(){
    return(
        <MapView
            ref = {(ref)=>this.mapView=ref}
            region={{
                latitude: 35.688442,
                longitude: 51.403753,
                latitudeDelta: 0.5,
                longitudeDelta: 0.5,
            }}
            onPress={()=>this.animate()}
        >

           ...markers...

        </MapView>
    );
}

Answer 2

clickOnSearchedAddress = (placeId, index, dscrpt) => {
        getLatLongFromAddress(placeId).then((response) => {

         let  r =  {
                [Constants.KEY_LATITUDE]: response.geometry.location.lat,
                    [Constants.KEY_LONGITUDE]: response.geometry.location.lng,
                    latitudeDelta: latitudeDelta,
                    longitudeDelta: longitudeDelta
            }
            this.mapView.animateToRegion(r, 1000)`enter code here`
            Keyboard.dismiss()
            isSetTextProgramatically = true;
            this.setState({
                search: dscrpt,
                searchData: [],

            })

        }).then((error) => { })
    }


 <MapView

                        ref={ref=>this.mapView = ref}
                        provider={PROVIDER_GOOGLE}
                        style={[styles.map, , { width: this.state.width }]}

                        initialRegion={region}
                        onRegionChangeComplete={this.onRegionChange}
                        showsMyLocationButton={true}
                        showsCompass={true}
                        showsUserLocation={true}
                        onMapReady={() => this.setState({ width: width - 1 })}
                   }

                    />

Answer 3

我认为问题在于 prop 没有被称为 ref，而是 mapRef。将 ref 传递到那里，它应该可以工作。

然后，您还必须使用类似 this.mapView.[current/map]animateToRegion 的内容来调用它。只需检查您获得的 mapView 对象即可。

如何在反应原生地图中使用animateToRegion函数？

3 个答案: