版本的帶孔洞的多邊形消失，高變焦水平

正如標題所示，在高變焦水平下，我對多邊形版本有點問題。版本的帶孔洞的多邊形消失，高變焦水平

我正在使用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個縮放級別拖動區域的邊緣，但這根本不是直觀的。

我已經找了答案，但似乎無法找到有相同問題的人。

非常感謝您的幫助。

來源

2017-04-03 Aurélien Warnon

我試過了你的小提琴，它確實顯示了你說的行爲 - 但只在Chrome 56中。我試過Firefox 52.0.2和IE 11，並且顯示了所有縮放級別的點。這是在Windows 7上。 –

事實上，這不會發生在IE 11中（也可能不會在Firefox上，也沒有測試過）。但是，我昨天在和我的客戶見面，他向我展示了他在Mac書（iOS）上的Chrome上的行爲。我的上帝的事情變得更糟！地圖控件（放大，縮小，...）根據縮放級別隨機消失，甚至在發生這種情況時他甚至失去了他的應用程序會話（我甚至不知道這是如何實現的）。他一點都不開心，我能理解。我目前正在研究一個骯髒的解決方法，以儘可能快地工作。感謝您的注意！ –

對於那些遇到同樣問題的人，我發現了一個似乎可行的骯髒的解決方法。

我創建了兩個多邊形，而不是帶孔的單個多邊形。

即相同一個在它和與0
具有爲0的fillOpacity和較高zIndex的相同座標另一個簡單多邊形strokeOpacity，用於一個孔。

當用戶想要編輯有孔多邊形時，訣竅是讓他在幕後編輯正多邊形。每當簡單的多邊形發生變化時，我只需同步孔洞多邊形，使其看起來完全一樣。

編輯正多邊形時，我沒有這個縮放問題，一切工作正常。

我希望這個答案很清楚。不要猶豫，問是否不是。我甚至可以讓一個jsfiddle是某人需要的一個例子。

來源

2017-04-06 05:16:13

版本的帶孔洞的多邊形消失，高變焦水平

回答

相關問題