Zha*_* Yi 18 react-native react-native-maps
我使用react-native来构建地图应用程序.我使用的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;
Run Code Online (Sandbox Code Playgroud)
Dav*_*vid 60
你应该使用这种animateToRegion方法(见这里)
它需要一个具有latitudeDelta和的区域对象longitudeDelta.使用这些来设置缩放级别.
更新:
在一个Region对象中的latitude与longitude指定的中心位置和latitudeDelta与longitudeDelta指定的可视地图区域的跨度.
这从图像此博客文章显示得很好(LatΔ和LngΔ).

| 归档时间: |
|
| 查看次数: |
21583 次 |
| 最近记录: |