मानचित्र की सीमाएं सेट करें

Question

मेरे पास एक ऐप है जो एपीआई को कॉल करता है और स्थानों की एक सूची देता है।

डेटा लौटाए जाने के बाद, मैं जेएसओएन एनोटेशन के लिए मानचित्र बिंदुओं में परिवर्तित करता हूं।

ये एमए में कोई समस्या नहीं है।

जिस समस्या में मैं चल रहा हूं वह मानचित्र की सीमा निर्धारित कर रहा है। मैं इसे समझने के लिए प्रतीत नहीं कर सकता।

मेरे पास वर्तमान में कोड है।

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

और यहाँ आप

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

चाहता हूँ जहाँ

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

latitude और longitude मानचित्र और के केंद्र रहे हैं मेरे विचार कोड

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

Answer 1

है डेल्टा न्यूनतम और अधिकतम अक्ष/लंबे दिखाए गए बीच के बीच दूरी (डिग्री में) हैं। उदाहरण के लिए, एक बिंदु के आसपास मील में किसी विशिष्ट दायरे को देखते हुए और मानचित्र दृश्य के एक पहलू अनुपात, आप region इस प्रकार की गणना कर सकते हैं:

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

rad2deg की परिभाषा, deg2rad, और earthRadiusInKM लिए एक व्यायाम के रूप छोड़ दिया जाता है पाठक।

Answer 2

यहाँ मेरा पूरा कोड आधारित है पर @ फिलिप का जवाब:

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