Question

GitHub上react-native-maps repo示例中提供的示例显示了一个按钮，用于执行函数以设置适当的缩放，考虑到标记列表：

  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函数？

Answer 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

Answer 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>
    }

React-Native-Maps在加载后立即适合Coordinate

2 个答案: