穴が開いたポリゴンの版が高いズームレベルで消えます

Question

タイトルによれば、高倍率でポリゴン版に少し問題があります。

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つのズームレベルでゾーンの端をドラッグできますが、これは直感的ではありません。

私は答えを探しましたが、同じ問題を抱えている人を見つけることはできません。

ありがとうございました。

Answer 1

同じ問題を抱えている人にとって、私はうまくいくと思われる回避策を見つけました。

穴のあるポリゴンの代わりに2つのポリゴンを作成しました。

• その中および0.1
• 0のfillOpacityと高いのZIndexと同じ座標を持つ別の単純なポリゴンのstrokeOpacityの穴と同じものとなります。

ユーザが穴あきポリゴンを編集したい場合、トリックは背後の正多角形を編集させることです。シンプルなポリゴンが変化するたびに、ポリゴンを正確に同じように同期させるだけです。

通常のポリゴンを編集する場合、このズームの問題はなく、すべて正常に機能しています。

この回答が十分に明確であることを希望します。そうでないかどうか尋ねることをためらってください。私は誰かが例を必要としていることをjsfiddleにすることさえできます。