Question

首先，对于您要阅读的问题，我使用此代码片段来突出显示我的多边形： Highlight polygon and tint rest of map using Google Maps

这是我的代码（它是Angular）：

var boundaries          = [];

// big area
var overlay             = [
  new $rootScope.googleApi.LatLng(80.0, -90.0),
  new $rootScope.googleApi.LatLng(-60.0, -90.0),
  new $rootScope.googleApi.LatLng(-60.0, 90.0),
  new $rootScope.googleApi.LatLng(80.0, 90.0)
];

// my polygon
angular.forEach(settings_boundaries, function(val, key) {
  boundaries.push(new $rootScope.googleApi.LatLng(val[1], val[0]));
});

// create a polygon with overlay first
var poly = new $rootScope.googleApi.Polygon({
  paths: [overlay, boundaries],
  strokeColor: "blue",
  strokeWeight: "1",
  fillColor: "black",
  fillOpacity: 0.4,
  clickable: false
});

poly.setMap(interactiveMap);

现在，真正的问题是，如果我使用这些坐标（我不记得我是如何得到它们的那样）：

[[1.6101837158203125,49.00274483644452],
[1.6294097900390625,49.01175312475694],
[1.5947341918945312,48.98787759766659],
[1.6101837158203125,49.00274483644452]]

一切正常（正如您所见here）。

但如果我使用这些：

[[1.6809940338134766,48.98337149775796],
[1.6791915893554688,48.96849847697763],
[1.7185020446777344,48.995199140974066],
[1.6809940338134766,48.98337149775796]]

这不再适用了。
如您所见here。

我用这个网站生成坐标：
http://www.the-di-lab.com/polygon/（查看screenshot）

我搜索了很长时间的问题，但我真的不知道。它的坐标大致相同。对于它们两者，第一个lat，lon值与最后一个相同。

如果您有任何想法（我猜这里有一些特殊的坐标），我想知道！

谢谢！

Answer 1

在结构上，三角形的坐标是正确的。只有几何差异，第一个三角形（一个起作用）以顺时针方向绘制，而后者则逆时针绘制。我已经遇到过这样的情况，但我不记得哪个网站。然后尝试以这种方式反转三角形的绘制方向：

     [[1.6809940338134766,48.98337149775796],
     [1.7185020446777344,48.995199140974066]
     [1.6791915893554688,48.96849847697763]
     [1.6809940338134766,48.98337149775796]]

谷歌地图多边形与外部地图着色

1 个答案: