Comment faire pour effectuer un zoom in/out dans réagissent-native-carte?
Je suis à l'aide de réagir indigènes pour construire une carte de l'application. L'api que j'utilise est à partir de ce lien: https://github.com/lelandrichardson/react-native-maps. Ci-dessous le code que j'ai amener la carte sur mon application. J'ai errer comment je peut donner une valeur de zoom sur la carte. Et comment je peux changer la valeur de zoom lorsque l'utilisateur clique sur un bouton sur la carte. Qu'est-ce que le zoom de l'API que je devrais utiliser pour y parvenir?
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;
OriginalL'auteur Zhao Yi | 2016-04-18
Vous devez vous connecter pour publier un commentaire.
Vous devez utiliser le
animateToRegion
méthode (voir ici)Il prend un objet de région qui a
latitudeDelta
etlongitudeDelta
. Utilisez-les pour régler le niveau de zoom.Mise à jour:
dans un
Region
objet de lalatitude
etlongitude
spécifier l'emplacement du centre etlatitudeDelta
etlongitudeDelta
spécifier la durée de la partie visible de la carte de la zone.Cette image de cette blog illustre bien (LatΔ et LngΔ).
Merci pour la réponse. Est-il un exemple pour illustrer l'utilisation de animateToRegion?
Oui, voir cet exemple: github.com/lelandrichardson/react-native-maps/blob/master/...
merci beaucoup pour la fourniture de cette information.
Alors, comment définir les deltas de l'aide personnalisée de zoom avant et de zoom arrière?
OriginalL'auteur David
J'ai été capable de faire ce travail à l'aide de
Dimensions.get('window');
et par défaut
LATITUD_DELTA = 0.0922
.Puis il suffit de mettre à jour ces valeurs avec le prop
onRegionChangeComplete
dans le<MapView>
Je pense qu'il devrait être LONGITUDE_DELTA = LATITUD_DELTA * (largeur / hauteur)
pourquoi u dire que?
OriginalL'auteur Cristian Canales