react-google-maps - 如何在第一次渲染时将视口从标记居中？

Question

我知道使用本机 Google Map API 我们可以执行以下操作：

const bounds = new google.maps.LatLngBounds();

const marker = new google.maps.Marker({ // wrap that into a loop to add multiple points
  position: new google.maps.LatLng(lat, lng),
  map: map
});

bounds.extend(marker.position);

map.fitBounds(bounds);

但是对于 react-google-maps，标记是组件，所以我想还有另一种方法。创建标记（作为组件）工作正常，是否有选项或其他东西可以将视口居中？

我希望我们不必像使用本机库那样将其创建为组件并重新创建它。

Answer 1

如果react-google-maps视口可以以给定的标记为中心，如下所示：

lifecycle({
    componentDidMount() {

        this.setState({
            zoomToMarkers: map => {
                const bounds = new window.google.maps.LatLngBounds();
                map.props.children.forEach((child) => {
                    if (child.type === Marker) {
                        bounds.extend(new window.google.maps.LatLng(child.props.position.lat, child.props.position.lng));
                    }
                })
                map.fitBounds(bounds);
            }
        })
    },
})

在哪里

<GoogleMap ref={props.zoomToMarkers} defaultZoom={5} defaultCenter={{ lat: 25.0391667, lng: 121.525 }}>
    {props.markers.map(marker => (
        <Marker
            key={marker.id}
            position={{ lat: marker.lat, lng: marker.lng }}
        />
    ))}
</GoogleMap>

演示