2017-04-03 37 views
2

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

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

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

非常感謝您的幫助。

+0

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

+0

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

回答

0

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

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

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

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

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

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