如何根据纬度经度导航到特定位置

Question

我正在开发示例 react-native 应用程序，在该应用程序中我正在使用 react-native-maps。它可以显示当前位置的精细地图，但是，我有自定义纬度经度，现在我想在单击按钮时导航到该特定位置。

这是我的代码：

 <MapView
                     ref='map'
              style={styles.map}
              region={this.state.mapRegion}
              showsUserLocation={true}
              followUserLocation={true}
              zoomEnabled={true}
              pitchEnabled={true}
              showsCompass={true}
              showsBuildings={true}
              showsTraffic={true}
              showsIndoors={true}
              onRegionChange={this.onRegionChange.bind(this)}
              onPress={this.onMapPress.bind(this)}>
             {this.state.markers.length != 0 || this.state.markers != undefined ?(
              this.state.markers.map(marker => (
               <MapView.Marker
                 coordinate={{
                   latitude: marker.Latitude||this.state.lastLat||region.latitude,
                   longitude:marker.Longitude||this.state.lastLong||region.longitude
                 }}
                 image = {
                  marker.EmergencyService == true ?(
                    require('./Imgs/emergencyService.png')):
                    (require('./Imgs/regularService.png'))
                 }
                 onCalloutPress={() => this.bookDoctorsAppointment(marker)}
         >
         <MyCustomMarkerView marker={marker}  navigator={this.props.navigator}/>
         </MapView.Marker>
              )      
         )):(<View></View>)}
            </MapView>

Answer 1

好像有一堆方法可用，我试试下面animateToRegion：

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

所以尝试使用那个 ref：

class MyComp extends Component {
    setMap = () => {
        if (this.map) {
            console.log('keys on this.map:', Object.keys(this.map));
            this.map.animateToRegion(...);
        }
    }
    getRefMap = el => this.map = el; // this also triggers when <MapView unmounts but el will be `null` so you can test if (el) { alert('mounted') } else { alert('unmounted') }
    render() {
        return (
            <View>
                <Text onPress={this.setMap}>Set map!</Text>
                <MapView ref={this.getRefMap} ...>;
            </View>
        )
    }
}