如何在ReactJS的Google Maps多边形内填充交叉图案？

方案1：利用Google Maps原生API的fillPattern属性（推荐） #

如果使用的是@react-google-maps/api库，Polygon组件支持传递原生API的配置选项，其中就包括fillPattern。可以通过自定义SVG图案实现交叉填充效果：

1. 定义交叉图案的MarkerImage：

const crossPattern = new window.google.maps.MarkerImage(
  'data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="20" y2="20" stroke="%23ff0000" stroke-width="2"/><line x1="20" y1="0" x2="0" y2="20" stroke="%23ff0000" stroke-width="2"/></svg>',
  new window.google.maps.Size(20, 20),
  new window.google.maps.Point(0, 0),
  new window.google.maps.Point(10, 10),
  new window.google.maps.Size(20, 20)
);

2. 在Polygon组件中引用该图案：

import { Polygon } from '@react-google-maps/api';

// 组件内部使用
<Polygon
  paths={yourPolygonPaths}
  fillColor="#ffffff"
  fillOpacity={0.8}
  fillPattern={crossPattern}
  strokeColor="#ff0000"
  strokeOpacity={1}
  strokeWeight={2}
/>

这种方式直接复用Google Maps原生能力，比OverlayView更稳定，不会出现位置偏移问题。

方案2：修复OverlayView的实现逻辑 #

如果坚持使用OverlayView，问题通常出在坐标映射和动态尺寸适配上。以下是正确的实现方式：

1. 封装自定义Overlay组件：

import { OverlayView } from '@react-google-maps/api';
import { useRef } from 'react';

const PatternOverlay = ({ map, bounds, patternColor }) => {
  const overlayRef = useRef(null);

  const onLoad = (overlay) => overlay.setMap(map);

  const draw = () => {
    if (!overlayRef.current || !map) return;
    const projection = map.getProjection();
    const sw = projection.fromLatLngToDivPixel(bounds.getSouthWest());
    const ne = projection.fromLatLngToDivPixel(bounds.getNorthEast());
    
    const overlayDiv = overlayRef.current;
    overlayDiv.style.left = `${sw.x}px`;
    overlayDiv.style.top = `${ne.y}px`;
    overlayDiv.style.width = `${ne.x - sw.x}px`;
    overlayDiv.style.height = `${sw.y - ne.y}px`;
  };

  return (
    <OverlayView
      onLoad={onLoad}
      draw={draw}
      pane="overlayLayer"
    >
      <div
        ref={overlayRef}
        style={{
          position: 'absolute',
          pointerEvents: 'none',
          backgroundImage: `url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="20" y2="20" stroke="${patternColor}" stroke-width="2"/><line x1="20" y1="0" x2="0" y2="20" stroke="${patternColor}" stroke-width="2"/></svg>')`,
          backgroundSize: '20px 20px',
          opacity: 0.8,
        }}
      />
    </OverlayView>
  );
};

2. 在地图组件中配合Polygon使用：

// 计算多边形的边界范围
const getPolygonBounds = (paths) => {
  const bounds = new window.google.maps.LatLngBounds();
  paths.forEach(path => bounds.extend(path));
  return bounds;
};

// 地图内部渲染
const polygonBounds = getPolygonBounds(yourPolygonPaths);

<Polygon paths={yourPolygonPaths} />
<PatternOverlay map={map} bounds={polygonBounds} patternColor="#ff0000" />

关键注意事项 #

• 确保React Google Maps库版本（如@react-google-maps/api v2+）支持原生API属性传递
• SVG的Data URI需要正确编码，比如#要转义为%23
• 使用OverlayView时，必须在draw方法中实时更新位置和尺寸，适配地图缩放/平移

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