Legen Sie die Grenzen einer MapView

Question

Ich habe eine App, die eine API aufruft und eine Liste der Standorte zurückgibt.

Sobald die Daten zurückgegeben werden, konvertiere ich die JSON zu Kartenpunkten für Anmerkungen.

Diese werden ohne Probleme zum MA hinzugefügt.

Das Problem, in das ich hineingeraten bin, setzt die Grenzen der Karte. Ich kann es nicht herausfinden.

Der Code, den ich derzeit habe, ist.

_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  
    }); 
} 

und hier ist meine Ansicht Code

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

Answer 1

Sie

wollen werden

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

wo

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

latitude und longitude der Mitte der Karte und die Deltas ist der Abstand (in Grad) zwischen dem minimalen und maximalen Breitengrad/Längengrad. Zum Beispiel eines bestimmten Radius in Meilen um einen Punkt und ein Seitenverhältnis von der Kartenansicht gegeben, könnten Sie region wie folgt berechnen:

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

Die Definitionen von rad2deg, deg2rad und earthRadiusInKM sind als Übung zu der Leser.

Answer 2

Hier ist meine komplette Code basiert auf @ Philipp Antwort:

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