Wie Sie zoom in/out reagieren-native-Karte?
Ich bin mit reagieren-native zu bauen, eine map-Anwendung. Die api die ich verwende, ist von diesem link: https://github.com/lelandrichardson/react-native-maps. Unten ist der code bringe ich die Karte auf meinem app. Ich Wandere, wie kann ich geben Sie einen zoom-Wert auf die Karte. Und wie kann ich ändern Sie den zoom-Wert, wenn der Benutzer auf eine Schaltfläche klicken Sie auf die Karte. Was ist die zoom-API, die ich verwenden sollten, um dies zu erreichen?
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
Image,
ListView,
TextInput,
TouchableHighlight,
Dimensions,
//MapView,
} from 'react-native';
import MapView from 'react-native-maps';
const styles = StyleSheet.create({
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
container: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 30,
flex: 1,
alignItems: 'center'
},
inputText: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 18,
borderWidth: 1,
borderColor: '#48BBEC',
borderRadius: 8,
color: '#48BBEC'
}
});
class MapPage extends Component{
constructor(props){
super(props);
this.state = {
region:{
latitude: 4.21048,
longitude: 101.97577,
latitudeDelta: 10,
longitudeDelta: 5
}
}
}
render() {
return(
<View style={styles.container}>
<TextInput style={styles.inputText}></TextInput>
<MapView
style={ styles.map }
mapType={"standard"}
region={this.state.region}
zoomEnabled={true}
scrollEnabled={true}
showsScale={true}
></MapView>
</View>
)
}
}
module.exports = MapPage;
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie die
animateToRegion
- Methode (siehe hier)Dauert es ein region-Objekt, das hat
latitudeDelta
undlongitudeDelta
. Verwenden Sie diese zum einstellen der zoom-Stufe.Aktualisiert:
in einem
Region
Objekt derlatitude
undlongitude
geben Sie den center-Standort und dielatitudeDelta
undlongitudeDelta
geben Sie die Spanne von den sichtbaren Kartenausschnitt.Dieses Bild von diese blog-post zeigt Sie auch (LatΔ und LngΔ).
War ich in der Lage, diese Arbeit mit
Dimensions.get('window');
standardmäßig eingestellt
LATITUD_DELTA = 0.0922
.Dann aktualisieren Sie einfach diese Werte mit den prop
onRegionChangeComplete
im<MapView>