Google Maps and React - 风格 map 控件

Question

import { GoogleMap, useLoadScript } from '@react-google-maps/api';
import { IGoogleCredentials } from '../../context';
import { googleMapsContainer } from './droppoint-map.css';

export interface IDroppointMapProps {
    googleCredentials: IGoogleCredentials;
}

export function DroppointMap({ googleCredentials }: IDroppointMapProps) {
    const { isLoaded, loadError } = useLoadScript({
        googleMapsApiKey: googleCredentials.googleMapsApiKey
    });

    if (loadError) return <p>{`Error loading google maps: ${loadError.message}`}</p>;
    if (!isLoaded) return <p>Loading maps ...</p>;
    return (
        <div>
            <GoogleMap
                mapContainerClassName={googleMapsContainer}
                zoom={8}
                center={{ lat: 56.154839, lng: 10.19038 }}
            />
        </div>
    );
}

map 结果屏幕转储

我真的希望能够更改缩放控件的大小以及左上角的“地图”和“卫星”按钮。 我不知道如何 go 关于那个。 map 风格的道具也许可以帮助我，但我似乎找不到任何关于如何做到这一点的文档。 @react-google-maps/api package 似乎甚至不允许禁用 ui 控件。

Answer 1

您可以添加例如options={{ controlSize: 10 }}将控件设置为大小 10。

<GoogleMap options={{ controlSize: 99 }}
           mapContainerClassName={googleMapsContainer}
           zoom={8}
           center={{ lat: 56.154839, lng: 10.19038 }} 
/>

您可以在此处的代码沙箱中看到它

@react-google-maps/api github 页面显示它支持 - options?: google.maps.MapOptions | undefined options?: google.maps.MapOptions | undefined 。 查看谷歌地图 api的描述，它有一个可以设置的controlSize属性，这将改变控件的大小。

您还可以通过在选项 object 中设置disableDefaultUI: true来禁用选项中的接口。