谷歌地图API中心“孔”的多边形

Question

将一个多边形插入到另一个多边形内部应该会在中心处制造一个“洞”（参见Google地图五角大楼的示例）。然而，我的程序一直无法制作出洞，而是制作出两层多边形线。

http://cl.ly/1c243E1V1G2M1D3H3c0O <-- 这是我的地图截图

有人说改变坐标顺序可以解决问题，因此我选择了Google示例中百慕大三角形的精确坐标，但它仍然存在我之前遇到的同样的问题。相关代码如下：

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

- David Kullmann

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

并且它将在你的三角形中显示一个漂亮的孔。

- slawekwin