Google maps 谷歌地图多边形-覆盖

我正试图在我的谷歌地图上实现一个“负面”覆盖，类似于你在Estatley.com上看到的效果。基本上，我已经根据收集到的KML数据成功地绘制了多边形贴图。当有多条路径时，它们绘制得很好

因此，对我的示例进行建模，首先，我从polygonCoords（Latling对象数组的数组）在我的区域周围创建一组多段线：

因此，我将负空间多边形反移位到我的PolygonCords数组中，并尝试 要绘制多边形，请执行以下操作：

negativeSpace = new google.maps.Polygon( {
                                           path: polygonCoords,
                                           strokeWeight: 0,
                                           strokeOpacity: 1,
                                           strokeColor: "#4F6D8F",
                                           fillColor: "#000000",
                                           fillOpacity: 0.2,
                                           clickable: false,
                                           map: map
                                         });

基本上，我希望会发生的是，我的初始多段线集将“打孔” 负空间多边形中的“洞”，因此基本上没有覆盖 我的城市边界。如果你去estate.com，搜索“AZ天堂谷”，你会发现 我可以看到效果

我尝试了几种变体（多边形与多段线、不同的填充颜色和颜色） 不透明度等），但没有达到我的示例中显示的效果

有什么想法吗？使用v3api，顺便说一句

谢谢，

---

Andy

两条路径必须位于同一个多边形中。内孔路径缠绕方向需要与外孔路径相反

---

（所有的“漏洞”似乎都是一样的）。

我相信这就是我所拥有的。在绘制覆盖图时，在绘制它之前，我已经预先添加了（取消偏移）和附加了周围的多边形。基本上，我的多边形看起来像：

[[环绕：（10，-170），（80，-170），（80，-50），（10，-50），（10，-170）][边界：（28.646438，80.84433100000001），（28.642874，80.84357699998），（28.642874，80.84317699997）]

我想我得到了你的“缠绕方向需要相反”-我已尝试反转外孔坐标方向，但没有通过。。。谢谢你的建议，我会继续挖掘。顺便说一句，第二个示例（按钮）在Firefox中似乎不起作用。这些按钮根本不起作用，我把它作为一个复杂孔的示例。如果你有一套完整的内孔坐标，我们可能可以提供更多帮助（甚至是指向显示问题的实时页面或JSFIDLE的链接）。谢谢！我从找到的多边形凸面和弯曲方向示例站点中获取了一些代码。我正在处理的示例总共有五个多边形-外部和4个“内部”。（这是根据人口普查数据生成的佛罗里达州泰特斯维尔地图）结果是：

0:：凸面？1，Wind:168001:：凸面？-1，Wind:-0.0129360668370281932:：凸面？-1，Wind:-0.0129360668370281933:：凸面？-1，Wind:-0.012936066837028193

我将在第二秒内发布对文件的访问，其中包含坐标集

function negativeSpaceBoundary()
{
  return [new google.maps.LatLng(10, -170), 
          new google.maps.LatLng(10, -50), 
          new google.maps.LatLng(80, -50), 
          new google.maps.LatLng(80, -170), 
          new google.maps.LatLng(10, -170)]
};

negativeSpace = new google.maps.Polygon( {
                                           path: polygonCoords,
                                           strokeWeight: 0,
                                           strokeOpacity: 1,
                                           strokeColor: "#4F6D8F",
                                           fillColor: "#000000",
                                           fillOpacity: 0.2,
                                           clickable: false,
                                           map: map
                                         });