3

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

因此，对我的示例进行建模，首先我从 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
                                         });

基本上，我希望会发生的是我最初的一组折线将在负空间多边形中“打一个洞”，这样基本上没有覆盖我的城市边界。如果你去restately.com，搜索“Paradise Valley, AZ”，你可以看到效果。

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

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

谢谢，安迪

4

1 回答 1

0

两条路径都需要在同一个多边形中。内孔路径缠绕方向需要与外路径相反。

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

你的多边形（所有的“洞”似乎都是一样的）。

于 2012-09-20T03:12:47.053 回答