带有孔的多边形版本随着高缩放级别消失答案

【问题标题】：Edition of polygon with hole disappears with high zoom level带有孔的多边形版本随着高缩放级别消失
【发布时间】：2017-04-03 05:56:45
【问题描述】：

正如标题所说，我在使用高缩放级别的多边形编辑时遇到了一点问题。

我正在使用 Google 地图 API 创建一个带有洞的多边形。这使我可以在地图上“突出显示”一个区域。在我的应用程序中，用户可以修改该多边形，使其完美匹配其区域。

该版本一切正常，但在 2 个最高缩放级别，版本“点”消失了。如果您真的想在绘制区域时精确，这会使编辑有点困难。

我是否缺少一些参数来使版本“点”出现在每个缩放级别？

我在这里有一个工作 jsfiddle：https://jsfiddle.net/nrtvewgh/1/

代码如下：

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 50.383074874246, lng: 5.1561069488525},
  zoom: 12,
  mapTypeId: 'satellite'
});

var WORLD_COORDS = [
    new google.maps.LatLng(-85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, 180),
    new google.maps.LatLng(-85.1054596961173, 180),
    new google.maps.LatLng(-85.1054596961173, 0)
];

var zoneCoords = [
    new google.maps.LatLng(50.414233409894, 5.1438760757446),
    new google.maps.LatLng(50.408462829958, 5.1216888427734),
    new google.maps.LatLng(50.383074874246, 5.1561069488525),
    new google.maps.LatLng(50.408435479564, 5.164647102356),
    new google.maps.LatLng(50.413348040727, 5.151150226593)
];
console.log(zoneCoords);
var domainZone = new google.maps.Polygon({
    paths: [WORLD_COORDS, zoneCoords],
    strokeColor: '#FFFFFF',
    strokeOpacity: 0.9,
    strokeWeight: 4,
    fillColor: '#FFFFFF',
    fillOpacity: 0.2,
    zIndex: 0
});
domainZone.setMap(map);
domainZone.setEditable(true);

只需放大区域边缘的“点”，它们最终会消失。

我注意到我仍然可以在最后 2 个缩放级别拖动区域的边缘，但这根本不直观。

我一直在寻找答案，但似乎找不到有同样问题的人。

非常感谢您的帮助。

【问题讨论】：

我尝试了您的 Fiddle，它确实显示了您所说的行为 - 但仅在 Chrome 56 中。我尝试了 Firefox 52.0.2 和 IE 11，它们显示了所有缩放级别的点。这是在 Windows 7 上。
确实，这在 IE 11 中不会发生（可能也不会在 Firefox 上发生，尚未测试过）。然而，我昨天和我的客户开会，他在他的 Mac 书（iOS）上向我展示了 Chrome 上的行为。我的天，事情变得更糟了！地图控件（放大，缩小，...）会根据缩放级别随机消失，当这种情况发生时，他甚至会失去他的应用程序会话（我什至不知道这怎么可能）。他一点也不开心，我能理解。我目前正在研究一种肮脏的解决方法，以使事情尽可能快地工作。感谢您的来信！

标签： javascript google-maps-api-3

【解决方案1】：

对于那些遇到同样问题的人，我发现了一个看似可行的肮脏解决方法。

我创建了两个多边形，而不是一个带孔的多边形。

同一个，其中有一个孔，strokeOpacity 为 0。
另一个简单的多边形，具有相同的坐标，fillOpacity 为 0，zIndex 更高。

当用户想要编辑有孔的多边形时，诀窍是让他在幕后编辑正多边形。每当简单多边形发生变化时，我都会简单地同步带孔的多边形，使其看起来完全一样。

编辑正多边形时，我没有这个缩放问题，一切正常。

我希望这个答案足够清楚。不要犹豫，问是否不是。如果有人需要一个例子，我什至可以制作一个 jsfiddle。

【讨论】：