反射谷歌地图中的洞多边形

Question

我正在使用tomchentw / react-google-maps集成组件，根据Maps JavaScript API，我尝试将路径支持多边形组件一系列outerCoords和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 Maps 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}
  />   

概念证明

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;
}

<div id="map"></div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
    </script>

我希望这有帮助！