设置地图视图的边界 [英] Set the bounds of a mapView

问题描述

我有一个调用 api 并返回位置列表的应用.

I have an app that calls an api and returns a list of locations.

返回数据后，我将 JSON 转换为用于注释的映射点.

Once the data is returned, I convert the JSON to map points for annotations.

这些可以毫无问题地添加到 ma 中.

These get added to the ma with no problem.

我遇到的问题是设置地图的边界.我似乎无法弄清楚.

The problem I am running into is setting the bounds of the map. I can't seem to figure it out.

我目前拥有的代码是.

_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}
/>

哪里

var region = {
  latitude,
  longitude,
  latitudeDelta,
  longitudeDelta,
};

latitude 和 longitude 是地图的中心，deltas 是显示的最小和最大纬度/经度之间的距离(以度为单位).例如，给定某个点周围的特定半径(以英里为单位)和地图视图的纵横比，您可以按如下方式计算 region:

latitude and longitude are the center of the map and the deltas are the distance (in degrees) between the minimum and maximum lat/long shown. For instance, given a certain radius in miles around a point and an aspect ratio of the map view, you could calculate region as follows:

var radiusInRad = radiusInKM / earthRadiusInKM;
var longitudeDelta = rad2deg(radiusInRad / Math.cos(deg2rad(latitude)));
var latitudeDelta = aspectRatio * rad2deg(radiusInRad);

rad2deg、deg2rad 和 earthRadiusInKM 的定义留给读者作为练习.

The definitions of rad2deg, deg2rad, and earthRadiusInKM are left as an exercise to the reader.

这篇关于设置地图视图的边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！