如何使用动态数组放大给定坐标？ （react-native-maps）

Question

我已经实现了这个示例，我可以通过单击按钮来放大给定的坐标。

First，我希望能够从动态数组中读取坐标，我尝试通过将数组置于状态来进行操作，但是失败。

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

第二我想在开始时将函数fitAllMarkers调用为坐标，因此不必单击某处即可。我尝试通过在componentDidMount()内部进行调用，但也无法正常工作。

第三，我想通过提供动态数组的坐标来放大该区域。

Answer 1

通过以下操作，我设法解决了问题中提到的所有问题：-为了适合地图初始化时的所有标记，我按照@Marek Lisik建议使用onMapReady={this.fitAllMarkers.bind(this)}进行。-并且要从动态数组中读取数据，我设法将数组事先传递给状态，并且在初始化地图时，它已经具有一些数据。

这是更改后的整个代码：

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