能否对@react-google-maps/api的加载提示信息进行自定义样式设置？

@react-google-maps/api 官方已经提供了自定义加载状态的入口，你可以完全替换默认的「Loading...」文本，也可以接入项目统一的加载动画，两种常用实现方式如下：

方案1：使用组件包裹的场景 #

如果你的地图逻辑是通过LoadScript组件包裹实现的，直接给组件传入loadingElement属性，属性值为你自定义的加载节点即可：

import { LoadScript, GoogleMap } from '@react-google-maps/api';

const MapComponent = () => {
  // 自定义加载节点，可替换为任意加载动画、骨架屏等组件
  const customLoading = (
    <div style={{
      width: '100%',
      height: '400px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: '#2f54eb'
    }}>
      {/* 此处替换为项目中的加载动画组件即可 */}
      <span>地图加载中，请稍候</span>
    </div>
  )

  return (
    <LoadScript
      googleMapsApiKey="你的谷歌地图API密钥"
      loadingElement={customLoading}
    >
      <GoogleMap
        mapContainerStyle={{ width: '100%', height: '400px' }}
        center={{ lat: 39.9042, lng: 116.4074 }}
        zoom={12}
      >
        {/* 地图内的其它业务组件 */}
      </GoogleMap>
    </LoadScript>
  )
}

方案2：使用useLoadScript Hook的场景 #

如果你是通过useLoadScript Hook来加载地图脚本，直接在脚本未加载完成的判断分支返回自定义加载节点即可：

import { useLoadScript, GoogleMap } from '@react-google-maps/api';

const MapComponent = () => {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: "你的谷歌地图API密钥",
  });

  // 脚本未加载完成时返回自定义加载内容
  if (!isLoaded) {
    return (
      <div style={{ width: '100%', height: '400px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {/* 此处替换为项目中的加载动画组件即可 */}
        <div className="custom-spinner" />
      </div>
    )
  }

  return (
    <GoogleMap
      mapContainerStyle={{ width: '100%', height: '400px' }}
      center={{ lat: 39.9042, lng: 116.4074 }}
      zoom={12}
    >
      {/* 地图内的其它业务组件 */}
    </GoogleMap>
  )
}

如果你只需要调整默认「Loading...」文本的样式，不需要替换内容，也可以通过CSS选择器直接匹配修改：

/* 假设地图外层容器类名为map-wrapper */
.map-wrapper > div:first-of-type {
  color: #666;
  font-size: 14px;
  padding: 20px 0;
}

更推荐前两种自定义节点的方案，扩展性更强，也能和项目整体UI风格保持统一。

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