google-maps - 谷歌地图多边形 - 叠加

Question

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

因此，对我的示例进行建模，首先，我从 PolygonCoords(它是 LatLng 对象数组的数组)围绕我的区域创建一组折线:

for (var d = 0 ; d < polygonCoords.length ; d++) 
{
  var b = new google.maps.Polyline( {
                                    path: polygonCoords[d],
                                    strokeWeight: 4,
                                    strokeColor: "#4F6D8F",
                                    strokeOpacity: 1,
                                    map: map
                                   });
}

我有一个“负空间”多边形，定义为:

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

因此，我将负空间多边形取消移动到我的 PolygonCoords 数组中，并尝试绘制多边形:

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

基本上，我希望发生的是我最初的一组折线将“打洞”负空间多边形中的一个洞”，因此基本上没有覆盖我的城市边界。如果您访问estately.com，并搜索“Paradise Valley, AZ”，您可以看到效果。

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

有什么想法吗？顺便说一句，使用 v3 API。

谢谢，安迪

Answer 1

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

http://www.geocodezip.com/v3_polygon_example_donut.html

http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_nosidebar.html?lat=37.155939&lng=-79.497071&zoom=6&type=m&filename=http://www.geocodezip.com/geoxml3_test/virginia_inverted_kml.xml

Your polygon (所有的“洞”似乎都是一样的)。