如何修改React中Google Maps的缩放控件及图层切换按钮尺寸？

一、配置/禁用UI控件 #

@react-google-maps/api 完全支持通过 Google Maps 原生配置项控制 UI 控件，只需给 <GoogleMap> 组件传入 options 属性即可：

1. 禁用全部默认UI控件
   如果想隐藏所有默认控件，设置 disableDefaultUI: true：

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

2. 单独控制特定控件
   如果只想禁用某一个控件（比如保留缩放控件，隐藏图层切换按钮），可单独配置对应选项：

options={{
    mapTypeControl: false, // 隐藏图层切换按钮
    // zoomControl: false, // 如需隐藏缩放控件，取消注释这行
}}

二、调整控件尺寸 #

控件尺寸无法通过 Google Maps 配置项直接修改，但可以通过 CSS 定位控件类名调整样式：

在你的 droppoint-map.css 中添加以下样式：

/* 调整缩放控件尺寸 */
.gm-zoom-control {
    transform: scale(0.8); /* 整体缩放控件大小 */
    transform-origin: top left; /* 保持左上角定位 */
}

.gm-zoom-control button {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
}

/* 调整图层切换按钮尺寸 */
.gm-map-type-control {
    transform: scale(0.8);
    transform-origin: top left;
}

.gm-map-type-control button {
    padding: 4px 8px !important;
    font-size: 12px !important;
}

修改后的完整组件代码 #

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 }}
                options={{
                    // 可选：禁用特定控件，比如隐藏图层切换
                    // mapTypeControl: false,
                }}
            />
        </div>
    );
}

说明 #

• Google Maps 控件样式类名均以 gm- 开头，你可以通过浏览器开发者工具定位具体控件类名，再针对性调整样式
• options 属性支持所有 Google Maps JavaScript API 的 MapOptions 配置项，可按需做更精细化控制

内容的提问来源于stack exchange，提问作者user18890175