使用google-map-react -> mapRef.current.fitBounds不是一个函数。

Question

我使用谷歌地图反应，我希望有正确的缩放和对地图的中心。为了使地图中心，我使用GoogleMapReact组件中心的道具，我可以计算这个组件。但对于变焦来说，它要复杂得多。

我可以看到fitBounds的使用，但这在“google地图反应”中是不可用的。

是否有一种方法来计算缩放，以便它包含我定义的标记。还是一个像越界一样自己做的函数？

小心不要混淆"谷歌地图反应“(此处使用)与”react google-map“(未使用)。

import GoogleMapReact from "google-map-react";
import {Place} from "@material-ui/icons";
import {useRef} from "react";


const Page = () => {

    const mapRef = useRef(null);

    const MarkerPlace = (props) => {
        return (
            <div>
                <Place fontSize={"large"}></Place>
                <p>{props.name}</p>
            </div>
        )
    }

    const FitBounds = () => {
        let bounds = new google.maps.LatLngBounds();
        let lat = 38.103;
        let lng = -121.572;
        bounds.extend(new google.maps.LatLng(lat, lng));

        console.log(mapRef.current) //o {props: {…}, context: {…}, refs: {…}, updater: {…}, _getMinZoom: ƒ, …}

        //The error occurs at the line below
        mapRef.current.fitBounds(bounds) //TypeError: mapRef.current.fitBounds is not a function
        //The error occurs at the line above
    }

    return (
        <div>
            <GoogleMapReact ref={mapRef} bootstrapURLKeys={{key: ""}} center={defaultCenter} defaultZoom={13}
                {view === "recherche" && currentSearchData.map((activity, index) => (
                    <MarkerPlace key={index} lat={activity.latitude} lng={activity.longitude} name={activity.name}/>
                 ))}
            </GoogleMapReact>
            <button onclick={FitBounds}>FitBounds</button>
        </div>
    )
}

export default Page;

Answer 1

fitBounds确实存在于google function中，但它是一个单独的实用函数，而不是实例上的一个函数。有关于如何在api接口中使用它的示例。根据源代码，fitBounds被定义为以角边界作为第一个参数，以高度/宽度字典作为第二个参数：

export function fitBounds({ nw, se, ne, sw }, { width, height }) {

并且它返回一个带有newBounds的新对象，可能是去结构化的，用来设置新的center和zoom。