我正在使用react-native
构建一个Map应用程序。我正在使用的API来自以下链接:https://github.com/lelandrichardson/react-native-maps.
下面是我把Map放到应用程序上的代码。我想知道如何在Map上设置缩放值。以及当用户单击Map上的按钮时,如何更改缩放值。
我应该使用什么样的缩放API来实现这一点?
import React, { Component, StyleSheet, View, TextInput } from "react-native";
import MapView from "react-native-maps";
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}>Map</TextInput>
<MapView
style={styles.map}
mapType={"standard"}
region={this.state.region}
zoomEnabled={true}
scrollEnabled={true}
showsScale={true}
/>
</View>
);
}
}
module.exports = MapPage;
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",
},
});
6条答案
按热度按时间li9yvcax1#
您应该使用
animateToRegion
方法(请参见此处)它采用一个区域对象,该对象具有
latitudeDelta
和longitudeDelta
。使用这些设置缩放级别。在
Region
对象中,latitude
和longitude
指定中心位置,而latitudeDelta
和longitudeDelta
指定可视Map区域的跨度。这张来自this博客文章的图片很好地说明了这一点(Lat Δ和Lng Δ)。
3df52oht2#
新的React Native Maps API为您提供了使用
zoom
参数调用animateCamera
方法的选项。xurqigkl3#
我可以使用
Dimensions.get('window');
完成此工作并且默认设置为
LATITUD_DELTA = 0.0922
。然后只需使用<MapView>
中的属性onRegionChangeComplete
更新此值myzjeezk4#
这就是我所做的,而且效果很好:
fnvucqvd5#
我基于https://github.com/tuupola/php_google_maps中的墨卡托数学创建了以下内容
键函数为
mercatorDegreeDeltas(latitude, longitude, width, height, zoom)
,它返回指定纬度/经度中心点、Map尺寸和缩放级别(1-20)的{ latitudeDelta, longitudeDelta }
。至少有一个问题:如果你把缩放比例从
4
改为3
,它不能正确居中,但是更大的缩放值可以工作。我现在不需要更小的缩放值,所以我没有进一步研究数学(可能是某种溢出?)yws3nbqq6#