使用Google Maps API无法为Pin添加自定义图片，求助切换图片方案

针对Pin组件无法嵌套Image显示自定义图片的问题，给你两个可行方案，同时满足条件切换图片的需求：

方案一：利用Pin组件的自定义图标属性（优先推荐） #

多数UI库的Pin组件会提供glyph（或类似命名的属性）支持传入自定义图标元素，直接将Image组件传给该属性即可：

// 封装条件切换图片的函数
const getPinImage = (condition) => {
  return condition ? "/pin-icon-active.png" : "/pin-icon-normal.png";
};

// 使用Pin组件
<Pin 
  background={'#FBBC04'} 
  glyphColor={'#575'} 
  borderColor={'#000'}
  glyph={
    <Image 
      src={getPinImage(yourBusinessCondition)} 
      alt="Custom Pin Icon" 
      style={{ width: '100%', height: '100%', objectFit: 'contain' }} 
    />
  }
/>

方案二：通过CSS样式覆盖实现 #

如果你的Pin组件不支持自定义图标属性，就用CSS隐藏默认图标，再将自定义图片绝对定位到Pin内部：

// 条件切换图片路径
const getPinImageSrc = (condition) => {
  return condition ? "/pin-icon-typeA.png" : "/pin-icon-typeB.png";
};

// 自定义Pin容器样式
const pinContainerStyle = {
  position: 'relative',
  // 隐藏Pin自带的默认图标，类名需根据实际组件调整（可通过浏览器开发者工具查看）
  '& .ant-pin-glyph': { // 示例默认图标类名，需替换为实际类名
    display: 'none'
  }
};

// 自定义图片样式
const pinImageStyle = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '70%', // 按需调整大小
  height: '70%',
  objectFit: 'contain'
};

// 渲染组件
<Pin 
  background={'#FBBC04'} 
  glyphColor={'#575'} 
  borderColor={'#000'}
  style={pinContainerStyle}
>
  <Image 
    src={getPinImageSrc(yourBusinessCondition)} 
    alt="Custom Pin" 
    style={pinImageStyle} 
  />
</Pin>

注意事项 #

• 先查阅Pin组件的官方文档，确认是否有自定义图标的属性，这是最稳妥的实现方式。
• 使用CSS覆盖时，要通过浏览器开发者工具定位Pin默认图标的类名，替换示例中的占位类名。
• 条件切换逻辑可根据业务场景调整，比如根据状态、数据字段值返回不同图片路径。

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