如何放大/缩小 react-native-map? [英] How to zoom in/out in react-native-map?

问题描述

我正在使用 react-native 构建地图应用程序.我使用的 api 来自此链接:

I am using react-native to build a map application. The api I am using is from this link: https://github.com/lelandrichardson/react-native-maps. Below is the code I bring the map on my app. I wander how I can give a zoom value on that map. And how I can change the zoom value when user click a button on the map. What is the zoom API I should use to achieve this?

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;

解决方案

You should use the animateToRegion method (see here)

It takes a region object which has latitudeDelta and longitudeDelta. Use these to set the zoom level.

Updated:

in a Region object the latitude and longitude specify the center location and latitudeDelta and longitudeDelta specify the span of the viewable map area.

This image from this blog post illustrates it well (LatΔ and LngΔ).

这篇关于如何放大/缩小 react-native-map?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！