如何使所有标记适合动态提供的给定坐标？ （反应本机地图）

Question

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

您可以在下面阅读我打算实现但我无法实现的内容：

首先，我希望能够从动态数组中读取坐标，我尝试将数组置于状态但失败了。

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