带有“洞”的Google Maps API多边形在中心 [英] Google Maps API Polygon with "Hole" In Center

问题描述

在另一个多边形内插入多边形应该在中心形成一个洞（请参阅​​Google地图五角大楼示例）。但是，我的程序一直没有做出一个漏洞，而是使两层多边形的线条变为insead。

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），
 google.maps.LatLng（25.774252，-82.190262 ）
]; 
 
 var circleOverlay = [
 new google.maps.LatLng（25.774252，-80.190262），
 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）; 
  

解决方案

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

  var circleOverlay = [
 new google.maps.LatLng（25.774252 ，-80.190262），
 new google.maps.LatLng（32.321384，-64.75737），//第二个和第三个坐标
 new google.maps.LatLng（18.466465，-66.118292），//交换比较到原来的
新google.maps.LatLng（25.774252，-80.190262）
]; 
  

它会在您的三角形中显示一个不错的洞

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

解决方案

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

这篇关于带有“洞”的Google Maps API多边形在中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！