web-dev-qa-db-fra.com

Comment faire un zoom avant / arrière sur React-Native-Map?

J'utilise react-native pour créer une application cartographique. L'API que j'utilise provient de ce lien: https://github.com/lelandrichardson/react-native-maps . Voici le code que j'apporte la carte sur mon application. Je me demande comment je peux donner une valeur de zoom sur cette carte. Et comment je peux changer la valeur du zoom lorsque l'utilisateur clique sur un bouton sur la carte. Quelle API de zoom dois-je 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;
react-nativereact-native-maps
18
Zhao Yi

Vous devez utiliser la méthode animateToRegion (voir ici )

Il prend un objet region qui a latitudeDelta et longitudeDelta. Utilisez-les pour définir le niveau de zoom.

Mise à jour:

dans un objet Region, les latitude et longitude spécifient l'emplacement central et latitudeDelta et longitudeDelta spécifient l'étendue de la zone de carte visible.

Cette image du blog this l'illustre bien (LatΔ et LngΔ). enter image description here

57
David

J'ai pu faire ce travail en utilisant Dimensions.get('window');

            const window = Dimensions.get('window');
            const { width, height }  = window
            LONGITUDE_DELTA = LATITUD_DELTA + (width / height)

et par défaut, définissez LATITUD_DELTA = 0.0922. Mettez ensuite à jour ces valeurs avec le prop onRegionChangeComplete dans le <MapView>

2
Cristian Canales