React native 设置地图视图的边界

我有一个调用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      
     });
}

\u handleResponse（响应）{
var位置=[]；
//在repsone中循环并将项目添加到arra以进行注释
对于（变量i=0；i

这是我的视图代码

<View style={styles.container}>
    <MapView
      style={styles.map}
      onRegionChangeComplete={this._onRegionChangeComplete}
      annotations={this.state.annotations}
    />
  </View>

您需要

<MapView
  ...
  region={region}
/>

纬度

和

经度

是地图的中心，三角洲是所示最小和最大纬度/经度之间的距离（以度为单位）。例如，给定某个点周围的特定半径（以英里为单位）和地图视图的纵横比，可以按如下方式计算

区域

：

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

---

rad2deg

、

deg2rad

和

earthRadiusInKM

的定义留给读者作为练习。

以下是基于@Philipp答案的完整代码：

import React, { Component } from 'react';
import { MapView } from 'react-native';

const earthRadiusInKM = 6371;
// you can customize these two values based on your needs
const radiusInKM = 1;
const aspectRatio = 1;

class Map extends Component {
    constructor(props) {
        super(props);

        // this will be the map's initial region
        this.state = {
          region : {
                     latitude: 0,
                     longitude: 0
                   }
        };
    }

    // you need to invoke this method to update your map's region. 
    showRegion(locationCoords) {
        if (locationCoords && locationCoords.latitude && locationCoords.longitude) {
            var radiusInRad = radiusInKM / earthRadiusInKM;
            var longitudeDelta = this.rad2deg(radiusInRad / Math.cos(this.deg2rad(locationCoords.latitude)));
            var latitudeDelta = aspectRatio * this.rad2deg(radiusInRad);

            this.setState({
              region: { latitude: locationCoords.latitude, longitude: locationCoords.longitude, latitudeDelta: latitudeDelta, longitudeDelta: longitudeDelta }
            });
        }
    }

    render () {
        return (
            <MapView
                style={{flex: 1}}
                region={this.state.region}/>
        )
    }

    deg2rad (angle) {
        return angle * 0.017453292519943295 // (angle / 180) * Math.PI;
    }

    rad2deg (angle) {
        return angle * 57.29577951308232 // angle / Math.PI * 180
    }
}

import React，{Component}来自'React'；
从“react native”导入{MapView}；
常数earthRadiusInKM=6371；
//您可以根据需要自定义这两个值
常数radiusInKM=1；
常量aspectRatio=1；
类映射扩展组件{
建造师（道具）{
超级（道具）；
//这将是地图的初始区域
此.state={
地区：{
纬度：0，
经度：0
}
};
}
//您需要调用此方法来更新地图的区域。
展示区域（位置坐标）{
if（locationCoords&&locationCoords.latitude&&locationCoords.longitude）{
var radiusInRad=radiusInKM/接地radiusInKM；
var longitudeDelta=这个.rad2deg（radiusInRad/Math.cos（这个.deg2rad（位置坐标纬度））；
var-latitudeDelta=aspectRatio*this.rad2deg（radiusInRad）；
这是我的国家({
地区：{纬度：位置坐标。纬度，经度：位置坐标。经度，纬度德尔塔：纬度德尔塔，经度德尔塔：经度德尔塔}
});
}
}
渲染（）{
返回(
)
}
deg2rad（角度）{
返回角度*0.017453292519943295//（角度/180）*Math.PI；
}
rad2deg（角度）{
返回角度*57.29577951308232//angle/Math.PI*180
}
}

import React, { Component } from 'react';
import { MapView } from 'react-native';

const earthRadiusInKM = 6371;
// you can customize these two values based on your needs
const radiusInKM = 1;
const aspectRatio = 1;

class Map extends Component {
    constructor(props) {
        super(props);

        // this will be the map's initial region
        this.state = {
          region : {
                     latitude: 0,
                     longitude: 0
                   }
        };
    }

    // you need to invoke this method to update your map's region. 
    showRegion(locationCoords) {
        if (locationCoords && locationCoords.latitude && locationCoords.longitude) {
            var radiusInRad = radiusInKM / earthRadiusInKM;
            var longitudeDelta = this.rad2deg(radiusInRad / Math.cos(this.deg2rad(locationCoords.latitude)));
            var latitudeDelta = aspectRatio * this.rad2deg(radiusInRad);

            this.setState({
              region: { latitude: locationCoords.latitude, longitude: locationCoords.longitude, latitudeDelta: latitudeDelta, longitudeDelta: longitudeDelta }
            });
        }
    }

    render () {
        return (
            <MapView
                style={{flex: 1}}
                region={this.state.region}/>
        )
    }

    deg2rad (angle) {
        return angle * 0.017453292519943295 // (angle / 180) * Math.PI;
    }

    rad2deg (angle) {
        return angle * 57.29577951308232 // angle / Math.PI * 180
    }
}