谷歌地图 API 多边形，中心有“洞”答案

【问题标题】：Google Maps API Polygon with "Hole" In Center谷歌地图 API 多边形，中心有“洞”
【发布时间】：2011-11-21 14:37:05
【问题描述】：

在另一个多边形内插入一个多边形应该会在中心形成一个“洞”（参见 Google maps Pentagon 示例）。但是，我的程序一直无法打孔，而是在内部打了两层多边形线。

有人说更改坐标顺序解决了他们的问题，所以我选择了谷歌在他们的示例中给出的百慕大三角形的坐标，但是，它遇到了与我之前遇到的相同的问题。相关代码如下：

    var everythingElse = [
       new google.maps.LatLng(25.774252, -82.190262),
       new google.maps.LatLng(17.466465, -65.118292),
       new google.maps.LatLng(34.321384, -63.75737),
       new google.maps.LatLng(25.774252, -82.190262)
     ];

    var circleOverlay = [
       new google.maps.LatLng(25.774252, -80.190262),
       new google.maps.LatLng(18.466465, -66.118292),
       new google.maps.LatLng(32.321384, -64.75737),
       new google.maps.LatLng(25.774252, -80.190262)
     ];

    PropertySearch.tintPolygon = new google.maps.Polygon({
         paths: [ everythingElse, circleOverlay ],
        strokeColor: "#000000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#000000",
        fillOpacity: 0.5
    });

    PropertySearch.tintPolygon.setMap(PropertySearch.map);

【问题讨论】：

标签： google-maps google-maps-api-3 polygon

【解决方案1】：

这确实是多边形中索引的方向问题，一个是顺时针方向，另一个应该是逆时针方向。将第二个数组更改为：

var circleOverlay = [
   new google.maps.LatLng(25.774252, -80.190262),
   new google.maps.LatLng(32.321384, -64.75737),  //second and third coordinates
   new google.maps.LatLng(18.466465, -66.118292), //are swapped compared to your original
   new google.maps.LatLng(25.774252, -80.190262)
 ];

它会在你的三角形中显示一个漂亮的洞

【讨论】：