Как подогнать все маркеры под заданные координаты динамически? (Реагируют родной-карты)

Question

Я реализовал этот пример, где я могу увеличить заданные координаты, нажав на кнопку.

Ниже вы можете прочитать, что я намереваюсь реализовать, и я не смог:

Сначала , я хочу иметь возможность считывать координаты из динамического c массив, я пытался положить массив в состояние, но это не удается.

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(), но тоже не сработало.

Третий , я хотел бы увеличить область, указав координаты из массива Dynami c ,

Answer 1

Мне удалось исправить все проблемы, упомянутые в этом вопросе, выполнив следующие действия: - Чтобы подогнать все маркеры при инициализации карты, я сделал, как @Marek Lisik предложил использовать onMapReady={this.fitAllMarkers.bind(this)}. -И для чтения из динамического c массива мне удалось заранее передать массив в состояние, и к моменту инициализации карты уже были некоторые данные.

Вот снова весь код с изменениями :

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