react-google-maps 中带孔的多边形答案

【问题标题】：Polygon with hole in react-google-mapsreact-google-maps 中带孔的多边形
【发布时间】：2017-06-27 08:23:28
【问题描述】：

我正在使用 tomchentw/react-google-maps 集成组件，根据 Maps JavaScript API，我尝试将 Polygon 组件的 paths 属性放入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}
      />

    );
})

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

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

【问题讨论】：

标签： javascript google-maps reactjs google-maps-api-3 react-native

【解决方案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>

我希望这会有所帮助！

【讨论】：