@react-google-maps/api自定义Marker图标scaledSize不生效及报错求助

报错原因 #

直接调用window.google.maps.Size时，谷歌地图API尚未完成异步加载（LoadScript组件是异步加载API），此时window.google为undefined，导致抛出Cannot read properties of undefined (reading 'maps')错误。

解决方案 #

不需要额外导入其他库，只需确保API加载完成后再调用其相关方法，以下两种方式任选其一：

方式一：使用useLoadScript钩子控制渲染时机 #

通过useLoadScript钩子判断API是否加载完成，确认加载后再创建Size实例：

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

const MapComponent = () => {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: "<MAP_API_KEY_GOES_HERE>",
  });

  if (!isLoaded) return <div>加载中...</div>;

  const scaledSize = new window.google.maps.Size(90, 42);

  return (
    <GoogleMap center={defaultProps.center} zoom={defaultProps.zoom} mapContainerStyle={mapStyle}>
      {objectList.map(obj => (
        <Marker 
          key={obj.idNum} 
          position={obj.position} 
          icon={{ url: obj.iconUrl, scaledSize }} 
        />
      ))}
    </GoogleMap>
  );
};

方式二：通过LoadScript的onLoad回调获取谷歌实例 #

利用LoadScript的onLoad回调保存已加载的谷歌地图实例，避免直接访问window.google：

import { useState } from "react";
import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";

const MapComponent = () => {
  const [googleMaps, setGoogleMaps] = useState(null);

  return (
    <LoadScript 
      googleMapsApiKey="<MAP_API_KEY_GOES_HERE>"
      onLoad={(google) => setGoogleMaps(google)}
    >
      {googleMaps && (
        <GoogleMap center={defaultProps.center} zoom={defaultProps.zoom} mapContainerStyle={mapStyle}>
          {objectList.map(obj => (
            <Marker 
              key={obj.idNum} 
              position={obj.position} 
              icon={{ 
                url: obj.iconUrl, 
                scaledSize: new googleMaps.maps.Size(90, 42) 
              }} 
            />
          ))}
        </GoogleMap>
      )}
    </LoadScript>
  );
};

关于scale属性无效的补充说明 #

scale属性需要配合size（原始图标尺寸）一起使用，是基于原始尺寸的缩放比例；而scaledSize是直接设置标记图标的最终显示尺寸，两种方案选其一即可实现图标缩放。

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