谷歌地图和React风格的地图控件

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

地图结果屏幕转储

我真的希望能够改变缩放控件的大小；映射"；以及"；卫星"；左上角的按钮。我不知道该怎么做。地图样式的道具可能会帮助我，但我似乎找不到任何关于如何做到这一点的文档。CCD_ 1包似乎甚至不允许禁用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/apigithub页面显示它支持一个类型为-options?: google.maps.MapOptions | undefined的props对象。看看谷歌地图api的描述，它有一个可以设置的controlSize属性，它将改变控件的大小。

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