5

GitHub の react-native-maps リポジトリの例で提供されている例は、マーカーのリストを考慮して適切なズームを設定する関数を実行するボタンを示しています。

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

https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md

すでに初期化されているマーカーの配列が与えられた場合、適切なフィットでマップを初期化することは可能でしょうか?

に適切なフィットを設定しようとすると、次のメッセージが表示されcomponentDidMountます。

Error using new LatLntBounds(LatLngBounds, int): Map size can't be 0. Most likely, layout has not yet occured for the map view.

fitAllMarkers()私の関数を呼び出すのは明らかに時期尚早です。onLoadマップが初期化された直後にトリガーできる関数はありますか?

4

2 に答える 2

9

fitToCoordinates はマーカーを使用せず、緯度と経度のオブジェクトの配列を使用します (そのための特定のメソッドがありますfitToSuppliedMarkers)。それを機能させるために重要なことはMapView、マップへの参照を取得するために internal への参照を与えることです。

class Map extends Component {

    constructor() {
        super()
        this.mapRef = null;
    }

    render() {
      return    <MapView style={{flex: 1}}
                    ref={(ref) => { this.mapRef = ref }}
                    onLayout = {() => this.mapRef.fitToCoordinates(this.props.myLatLongs, { edgePadding: { top: 10, right: 10, bottom: 10, left: 10 }, animated: false })}>
                    <Polyline coordinates={this.props.myLatLongs} strokeWidth={4} strokeColor="#2962FF" /> 
                </MapView>
    }
}

この場所に到着する将来の人々のために、コードをここに残します。これは、レポhttps://github.com/airbnb/react-native-maps/issues/1003の問題でも私の回答と重複しています。

また、ここに到着した人は、mapview のドキュメントの更新を参照してください: https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md

于 2017-02-11T15:21:47.510 に答える