Set the bounds of a mapView

问题:

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

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

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.

The code I currently have is.

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

and here is my view code

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

回答1:

You'll want

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

where

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

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

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

回答2:

Here is my complete code based on @Philipp's answer:

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