React-google-maps 中带孔的多边形

Question

我正在使用 tomchentw/react-google-maps 集成组件，根据 Maps JavaScript API，我尝试将Polygon组件的paths属性放入外部Coords 和 InnerCords 数组中，以显示多边形内部的孔：

props.zones.value.data.map( () => {
    var outerCoords = [
      {lat: -32.364, lng: 153.207}, // north west
      {lat: -35.364, lng: 153.207}, // south west
      {lat: -35.364, lng: 158.207}, // south east
      {lat: -32.364, lng: 158.207}  // north east
    ];

    var innerCoords1 = [
      {lat: -33.364, lng: 154.207},
      {lat: -34.364, lng: 154.207},
      {lat: -34.364, lng: 155.207},
      {lat: -33.364, lng: 155.207}
    ];

    var innerCoords2 = [
      {lat: -33.364, lng: 156.207},
      {lat: -34.364, lng: 156.207},
      {lat: -34.364, lng: 157.207},
      {lat: -33.364, lng: 157.207}
    ];

    return (

      <Polygon
        key={zone.id}
        paths={[outerCoords, innerCoords1, innerCoords2]}
        onClick={props.onMapClick}
      />

    );
})

结果是一个内部有其他多边形的多边形，而不是孔。

其他人发现这个问题了吗？

Answer 1

Google 地图 JavaScript API 文档说明如下：

要在多边形内创建空白区域，您需要创建两条路径，一条位于另一条内部。要创建孔，定义内部路径的坐标必须与定义外部路径的坐标顺序相反。例如，如果外部路径的坐标是顺时针顺序，则内部路径必须是逆时针顺序。

https://developers.google.com/maps/documentation/javascript/shapes#polygon_hole

在您的示例中，您应该更改内部路径的顺序：

<Polygon
    key={zone.id}
    paths={[outerCoords, innerCoords1.reverse(), innerCoords2.reverse()]}
    onClick={props.onMapClick}
  />   

概念证明

<Polygon
    key={zone.id}
    paths={[outerCoords, innerCoords1.reverse(), innerCoords2.reverse()]}
    onClick={props.onMapClick}
  />   

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: -34.198173, lng: 151.677246},
  });

  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords1.reverse(), innerCoords2.reverse()],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

我希望这有帮助！