我有一个应用程序调用 api 并返回位置列表。
返回数据后,我将 JSON 转换为地图点以进行注释。
这些都可以毫无问题地添加到 ma 中。
我遇到的问题是设置地图的边界。我似乎无法弄清楚。
我目前拥有的代码是。
_handleResponse(response) {
var locations = [];
// Loop through repsone and add items to an arra for annotations
for (var i = 0; i < response.length; i++) {
// Get the location
var location = response[i];
// Parse the co ords
var lat = parseFloat(location.Latitude);
var lng = parseFloat(location.Longitude);
// Add the location to array
locations.push({
latitude: lat,
longitude: lng,
title: location.Name
});
}
// This calls the map set state
this.setState({
annotations: locations
});
}
这是我的查看代码
<View style={styles.container}>
<MapView
style={styles.map}
onRegionChangeComplete={this._onRegionChangeComplete}
annotations={this.state.annotations}
/>
</View>
你会想要
<MapView
...
region={region}
/>
where
var region = {
latitude,
longitude,
latitudeDelta,
longitudeDelta,
};
latitude
and longitude
是地图的中心,增量是显示的最小和最大纬度/经度之间的距离(以度为单位)。例如,给定一个点周围的特定半径(以英里为单位)和地图视图的纵横比,您可以计算region
如下:
var radiusInRad = radiusInKM / earthRadiusInKM;
var longitudeDelta = rad2deg(radiusInRad / Math.cos(deg2rad(latitude)));
var latitudeDelta = aspectRatio * rad2deg(radiusInRad);
的定义rad2deg
, deg2rad
, and earthRadiusInKM
留给读者作为练习。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)