Zoom 到指定标记 react-native-maps

Question

在react-native-maps文档中有一个部分介绍如何缩放到标记数组，但是无论是在文档还是示例文件夹中（据我所知），都没有提供如何实现的代码示例。

是否有人可以提供如何实现的示例？

- Luke Berry

---

https://github.com/airbnb/react-native-maps/blob/master/example/examples/FitToSuppliedMarkers.js 这似乎是一个 Zoom to Array 的示例。 - Frank Phillips

Answer 1

在MapView组件文档中，有几个方法：fitToElements、fitToSuppliedMarkers和fitToCoordinates。https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md#methods。

如果你想在加载时缩放地图以显示一些标记集合，可以使用componentDidMount在初始渲染后缩放地图：

class SomeView extends Component {
    constructor() {
      this.mapRef = null;
    }

    componentDidMount() {
      this.mapRef.fitToSuppliedMarkers(
        someArrayOfMarkers,
        false, // not animated
      );
    }

    render() {
      <MapView
        ref={(ref) => { this.mapRef = ref }}
      >
        { someArrayOfMarkers }
      </MapView>
    }
}

- lilactown

---

谢谢您的回复，但我该如何更改缩放距离呢？目前它缩得太远了，所有标记都似乎重叠在一起。 - Luke Berry

忽略我之前的评论，我很傻。再次感谢。 - Luke Berry

这里的 someArrayOfMarkers 是什么？@luke Berry - Anant kamat

@LukeBerry，someArrayOfMarkers应该长这样： [ {纬度：36.193852，经度：43.964365}， {纬度：36.170168，经度：44.02348}， {纬度：36.202618，经度：44.035115} ] - Muho

@LukeEhresman 只需在 <Map /> 上添加以下内容：initialRegion={{ latitude: 0, longitude: 0, latitudeDelta: 0.015, longitudeDelta: 0.0121, }}使用您自己的值，这将设置初始缩放比例。当标记加载后，脚本将适应它们。 - user3585918