Google Maps API 带有“孔”的多边形位于中心

发布于 2024-12-05 19:02:07 字数 1128 浏览 1 评论 0原文

将一个多边形插入另一个多边形内部应该会在中心形成一个“洞”（参见谷歌地图五角大楼示例）。然而，我的程序始终无法打洞，而是在前面制作了两层多边形线。

http://cl.ly/1c243E1V1G2M1D3H3c0O <-- 我的地图图像

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

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

原文

Inserting a polygon inside another polygon is supposed to make a "hole" in the center (see the Google maps Pentagon example). However, my program keeps failing to make a hole and instead makes two layers of polygon lines insead.

http://cl.ly/1c243E1V1G2M1D3H3c0O <-- image of my map

Someone said changing the coordinate order fixed their problem so I selected exactly the coordinates of the bermuda triangle as given by Google in their example, however, it had the same problem I encountered before. The relevant code is below:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

街角卖回忆 2024-12-12 19:02:07

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

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

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

It really is a matter of direction of indices in your polygons, while one is clockwise other should be counter-clockwise.
Change your second array to:

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

and it will display a nice hole in your triangle

回复收藏 0 原文

~没有更多了~