web-dev-qa-db-ja.com

react-native-mapでズームイン/アウトする方法は？

私は反応ネイティブを使用して、地図アプリケーションを構築しています。私が使用しているAPIは、このリンクからです： https://github.com/lelandrichardson/react-native-maps 。以下は、アプリにマップを表示するコードです。そのマップでズーム値を指定する方法をさまよう。そして、ユーザーがマップ上のボタンをクリックしたときにズーム値を変更する方法。これを達成するために使用するズームAPIは何ですか？

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

animateToRegionメソッドを使用する必要があります（ here を参照）

latitudeDeltaとlongitudeDeltaを持つ領域オブジェクトを取ります。これらを使用してズームレベルを設定します。

更新：

Regionオブジェクトでは、latitudeおよびlongitudeは中心位置を指定し、latitudeDeltaおよびlongitudeDeltaは表示可能なマップ領域のスパンを指定します。

this ブログ投稿からのこの画像は、それをよく示しています（LatΔとLngΔ）。 enter image description here

57
David

Dimensions.get('window');を使用してこの作業を行うことができました

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

そしてデフォルトでLATITUD_DELTA = 0.0922を設定します。次に、<MapView>のprop onRegionChangeCompleteでこの値を更新します。

2
Cristian Canales