如何使用指定图片自定义React-google-map组件的Marker样式

嘿，我之前也踩过这个坑！你代码里的问题在于直接用数字设置size是无效的——React-Google-Maps底层依赖的Google Maps JavaScript API，要求图标尺寸必须用google.maps.Size对象来定义，而不是简单的数值。

试试下面的修改方案：

正确的自定义Marker配置 #

首先确保你的项目已经正确加载了Google Maps JS API（这样全局的google对象才能访问到），然后调整你的图标配置：

// 定义自定义图标配置
const customMarkerIcon = {
  url: '../images/icons/yellow.png',
  // 图片的原始像素尺寸（根据你实际的图片大小填写，比如你的图片是50x50像素）
  size: new google.maps.Size(50, 50),
  // 你想要显示的实际缩放尺寸
  scaledSize: new google.maps.Size(10, 10),
  // 可选：设置图标锚点，让标记的位置对应图片的中心点（这里是5,5，对应10x10的中心）
  anchor: new google.maps.Point(5, 5)
};

// 在组件中使用
return (
  <Marker
    position={location}
    icon={customMarkerIcon}
    onClick={this.handleMarkerClick.bind(this, marker)}
  />
);

关键说明 #

• size：对应你自定义图片的原始像素尺寸，必须用google.maps.Size(width, height)来创建实例。
• scaledSize：这是控制Marker最终显示大小的核心属性，同样需要用google.maps.Size定义，它会把原始图片缩放到目标尺寸显示。
• anchor：可选属性，用来修正标记的位置偏移（比如让图片的中心点精准对应地图上的坐标点）。

如果你的自定义图片本身就是10x10像素，那size和scaledSize可以设成一样的，但还是要通过google.maps.Size来定义，不能直接写数字哦！

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