How to zoom in to given coordinates using dynamic array? (react-native-maps)

问题

I have implemented this example where I can zoom in to the given coordinates by clicking on the button.

First, I want to be able to read coordinates out of a dynamic array, I tried by putting the array in the state but it fails.

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const MARKERS = [
    {
        latitude: 42.637368,
        longitude: 21.148682,
    },
    {
        latitude: 42.604021,
        longitude: 21.261292,
    },
    {
        latitude: 42.500833,
        longitude: 21.181641,
    }
];

const DEFAULT_PADDING = { top: 60, right: 60, bottom: 60, left: 60 };

export default class map_of_patients extends React.Component {

    constructor(){
        this.state={}
    }

    fitAllMarkers() {
        this.map.fitToCoordinates(MARKERS, {
            edgePadding: DEFAULT_PADDING,
            animated: true,
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <MapView
                    ref={ref => {
                        this.map = ref;
                    }}
                    style={styles.map}
                    initialRegion={{
                        latitude: LATITUDE,
                        longitude: LONGITUDE,
                        latitudeDelta: LATITUDE_DELTA,
                        longitudeDelta: LONGITUDE_DELTA,
                    }}
                >
                    {MARKERS.map((marker, i) => (
                        <Marker key={i} identifier={`id${i}`} coordinate={marker} />
                    ))}
                </MapView>
                <View style={styles.buttonContainer}>
                    <TouchableOpacity
                        onPress={() => this.fitAllMarkers()}
                        style={[styles.bubble, styles.button]}
                    >
                        <Text>Fit All Markers</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

Second I would like to call the function fitAllMarkers into coordinates on start, so I don't have to click somewhere to do it. I tried by calling in inside componentDidMount() but didn't work either.

Third, I would like to zoom in to the region by giving the coordinates from the dynamic array.

回答1:

I managed to fix all the issues mentioned in the question by doing the following: -To fit all markers on initialization of the map I did as @Marek Lisik suggested using onMapReady={this.fitAllMarkers.bind(this)}. -And to read from a dynamic array I managed to pass the array beforehand to the state and by the time the map is initialized it already had some data.

Here is the entire code again with the changes:

 constructor(props) {
    super(props);
    this.state = {
        region: {
            latitude: 42.65847,
            longitude: 21.16070,
            latitudeDelta: 0.500,
            longitudeDelta: 0.500 * width / height,
        },
        MARKERS: [
            {
                latitude: 42.637368,
                longitude: 21.148682,
                description: "dfsdf",
                title: "title"
            },
            {
                latitude: 42.604021,
                longitude: 21.261292,
                description: "sdfsdf",
                title: "title"
            },
            {
                latitude: 42.500833,
                longitude: 21.181641,
                description: "sdfsdfds",
                title: "title"
            }
        ]
    };
}

fitAllMarkers() {
    this.map.fitToCoordinates(this.state.MARKERS, {
        edgePadding: DEFAULT_PADDING,
        animated: true,
    });
}


render() {
    return (
        <View style={styles.container}>
            <MapView
                ref={ref => {
                    this.map = ref;
                }}
                style={styles.map}
                initialRegion={this.state.region}
                onMapReady={this.fitAllMarkers.bind(this)}

            >
                {this.state.MARKERS.map((marker, i) => (
                    <Marker key={i} identifier={`id${i}`} coordinate={marker}
                        description={marker.description}>
                    </Marker>
                ))}
            </MapView>

            <View style={styles.buttonContainer}>
                <TouchableOpacity
                    onPress={() => this.fitAllMarkers()}
                    style={[styles.bubble, styles.button]}
                >
                    <Text>Fit All Markers</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

来源：https://stackoverflow.com/questions/61218358/how-to-zoom-in-to-given-coordinates-using-dynamic-array-react-native-maps