React-Native-Maps 在加载后立即适合坐标答案

【问题标题】：React-Native-Maps fits Coordinate right after being loadedReact-Native-Maps 在加载后立即适合坐标
【发布时间】：2017-06-16 07:29:07
【问题描述】：

在 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函数可以在地图初始化后立即触发？

【问题讨论】：

标签： javascript android google-maps react-native react-native-maps

【解决方案1】：

fitToCoordinates 不使用标记，它使用纬度和经度对象数组（fitToSuppliedMarkers 有一个特定的方法）。让它工作的一个重要事情是提供对内部MapView 的引用，以获取对地图的引用。

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

【讨论】：

【解决方案2】：

当我使用 onLayout 道具时，将地图拟合到所需坐标需要很长时间。

我更喜欢在完全加载地图之前将地图拟合到坐标的 onMapReady 道具。

render() {
      return (
        <MapView style={{flex: 1}}
           ref={(ref) => { this.mapRef = ref }}
           onMapReady = {() => this.mapRef.fitToCoordinates(this.props.myLatLongs, { edgePadding: { top: 10, right: 10, bottom: 10, left: 10 }, animated: false })}>
           /** ... */
        </MapView>
    }

【讨论】：