如何在google-maps-react中为Marker图标设置border-radius样式？

不能直接通过CSS的border-radius样式给当前的Marker图标添加圆角，因为Google Maps的Marker图标并非普通DOM元素，不受常规CSS规则控制，换以下几种方式就能实现需求：

• 修改SVG源文件
  直接在你的location markeRlightmode.svg文件里给图形添加圆角属性。比如如果是矩形元素，给它加上rx="8" ry="8"（数值按需调整）：

  <rect x="0" y="0" width="40" height="40" rx="8" ry="8" fill="#yourColor" />
  

  这种方式最省心，修改后直接沿用原来的Marker代码即可。

• 用OverlayView实现可自定义样式的标记
  借助google-maps-react的OverlayView组件，把标记做成DOM元素，这样就能用CSS自由设置圆角了：

  import { OverlayView } from 'google-maps-react';
  
  // 在组件中使用
  <OverlayView
    key={id}
    position={{
      lat: business.branch?.address?.lat,
      lng: business.branch?.address?.lng,
    }}
    mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
  >
    <div style={{
      width: '40px',
      height: '40px',
      borderRadius: '8px',
      backgroundImage: 'url(/static/images/location markeRlightmode.svg)',
      backgroundSize: 'cover',
      cursor: 'pointer'
    }} />
  </OverlayView>
  

• 通过Canvas生成带圆角的图标
  先在Canvas上绘制图片并裁剪圆角，再把Canvas转为DataURL作为Marker的图标源：

  // 封装生成带圆角图标的函数
  const getRoundedIcon = (imgUrl, size, radius) => {
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');
    
    // 绘制圆角裁剪路径
    ctx.beginPath();
    ctx.moveTo(radius, 0);
    ctx.lineTo(size - radius, 0);
    ctx.quadraticCurveTo(size, 0, size, radius);
    ctx.lineTo(size, size - radius);
    ctx.quadraticCurveTo(size, size, size - radius, size);
    ctx.lineTo(radius, size);
    ctx.quadraticCurveTo(0, size, 0, size - radius);
    ctx.lineTo(0, radius);
    ctx.quadraticCurveTo(0, 0, radius, 0);
    ctx.closePath();
    ctx.clip();
    
    // 加载图片并绘制到Canvas
    const img = new Image();
    img.src = imgUrl;
    img.onload = () => {
      ctx.drawImage(img, 0, 0, size, size);
    };
    
    return canvas.toDataURL();
  };
  
  // 使用Marker组件时调用函数
  <Marker
    key={id}
    position={{
      lat: business.branch?.address?.lat,
      lng: business.branch?.address?.lng,
    }}
    icon={{                     
      url: getRoundedIcon('/static/images/location markeRlightmode.svg', 40, 8),
      scaledSize: new google.maps.Size(40, 40),
    }}
  />
  

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