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视口可以像这样给定标记居中：

public void addMoreDataToList(ArrayList result){
currentDataList.addAll(result);
notifyDataSetChanged();
}

，其中

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);
            }
        })
    },
})

Demo

如何在第一次渲染时从标记居中视口？

1 个答案: