React 集成 Google Map 时如何调整地图图标大小

以下是两种常用集成场景的调整方法：

场景1：使用 @react-google-maps/api 组件库 #

直接在 Marker 组件的 icon 属性中配置 scaledSize 参数即可控制图标渲染尺寸，不会裁切原图：

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

const CustomMapMarker = () => {
  // 图标配置
  const markerIcon = {
    url: "替换为你的图标资源路径",
    // 按需求修改宽高数值，单位为像素
    scaledSize: new window.google.maps.Size(32, 32),
    // 可选配置：调整锚点，避免图标偏移坐标点，示例为底部居中锚点
    anchor: new window.google.maps.Point(16, 32)
  };

  return (
    <Marker
      position={{ lat: 39.9042, lng: 116.4074 }}
      icon={markerIcon}
    />
  );
};

场景2：直接调用原生 Google Map JS API #

创建Marker实例时传入icon配置即可，逻辑和组件库用法一致：

const initMarker = (mapInstance) => {
  new window.google.maps.Marker({
    position: { lat: 39.9042, lng: 116.4074 },
    map: mapInstance,
    icon: {
      url: "替换为你的图标资源路径",
      scaledSize: new window.google.maps.Size(40, 40),
      anchor: new window.google.maps.Point(20, 40)
    }
  });
};

注意事项 #

• 不要用size属性调整显示尺寸，该属性作用为裁切图标原图，设置不当会出现图标截断问题
• 动态调整大小时，将scaledSize的宽高参数存入state，修改state即可实时更新图标尺寸
• SVG格式图标可以直接把SVG内容转为Data URI传入url属性，缩放效果同样生效

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