如何设置react-google-maps中默认标记图标的尺寸？

嘿，这个问题我之前刚好研究过！完全可以不用替换成自定义图标就调整react-google-maps里默认标记的尺寸，下面给你两种实用的方案：

方法一：通过CSS缩放默认标记 #

react-google-maps的默认标记会生成一个包含SVG的DOM元素，我们可以通过定位这个元素来设置缩放样式：

1. 给你的<Marker>组件添加一个自定义类名，比如scaled-marker：

import { Marker } from 'react-google-maps';

// 在你的组件渲染逻辑中使用
<Marker
  position={{ lat: 40.7128, lng: -74.0060 }}
  className="scaled-marker"
/>

2. 在CSS文件里针对这个类名设置缩放变换：

.scaled-marker img {
  transform: scale(0.7); /* 数值可按需调整，0.7代表缩小至原尺寸的70% */
  transform-origin: center bottom; /* 保证缩放时标记的锚点（底部中心）位置不变，避免偏移 */
}

小说明：默认标记的DOM结构里，图标是一个<img>标签，所以直接选中它设置transform就能生效。transform-origin的设置很关键，能让缩放后的标记位置和原位置保持一致。

方法二：利用Marker的icon属性（无需自定义图标文件） #

如果你更倾向于通过API配置而非CSS，也可以直接复用谷歌地图的默认图标URL，通过icon属性设置尺寸：

<Marker
  position={{ lat: 40.7128, lng: -74.0060 }}
  icon={{
    url: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png', // 谷歌官方默认标记的URL
    scaledSize: new window.google.maps.Size(30, 45), // 这里设置你需要的宽高，默认尺寸大概是40x60
    anchor: new window.google.maps.Point(15, 45) // 锚点对应缩放后的底部中心，x为宽度的一半，y为高度值
  }}
/>

这个方案的优势是直接通过谷歌地图API控制，不依赖样式表，适合需要精准控制标记尺寸和锚点的场景。注意要确保window.google已加载完成，避免出现API未定义的报错。

额外小贴士 #

• 如果用CSS方案，要是需要给不同标记设置不同尺寸，只要给它们添加不同的类名，再写对应的CSS规则就行。
• 两种方案都不需要你自己制作或上传自定义图标，完美契合你的需求～

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