以前、この質問を別の見出しで Stackoverflow に投稿しましたが、あまり反応がありませんでした。今回は、さらに説明を加えて再度投稿します。
V3 js API を使用して Google マップを実装しました。マップ内に約 500 の郵便番号ポリゴンを描画しています。郵便番号ポリゴンの色付けは、正常に機能している特定の条件によって異なります。郵便番号のセットに異なる色を割り当てているように。しかし、問題は、マップを拡大すると、ポリゴンの色の一部が他のポリゴンの色と重なることです。
例: DB から 30 個の郵便番号を取得しています。これらの 30 の郵便番号を 5 つの地域に分割しています (最高の売り上げから最低の売り上げに応じて)。各領域は特定の色でマークされます。したがって、この場合、5 つの異なる色を持つように、30 のポリゴンが 5 つの領域でプロットされます。マップを拡大しても、グループ化に変化はありませんが、一部のポリゴン (3 ~ 4 の可能性があります) の色が他のポリゴンと重なっています。法線マップで 3 番目の領域の色が「黄色」の場合、マップをズームすると、領域 3 のポリゴンの一部が「赤」の色で重なります。「赤」の色は地域 1 の郵便番号ポリゴンに属します。
ここにコードがあります
{% ifequal zip.rank 1 %}
var fillColor = '#FF0000';
{% endifequal %}
{% ifequal zip.rank 2 %}
var fillColor = '#FF00D3';
{% endifequal %}
{% ifequal zip.rank 3 %}
var fillColor = '#BE4BAA';
{% endifequal %}
{% ifequal zip.rank 4 %}
var fillColor = '#BE88B5';
{% endifequal %}
{% ifequal zip.rank 5 %}
var fillColor = '#857081';
{% endifequal %}
var path = [
{% for polycoord in zip.zip_info.zip_polygon %}
new google.maps.LatLng({{polycoord.1}}, {{polycoord.0}}),
{% endfor %}
];
var polygon = new google.maps.Polygon(
{
path:path,
clickable:true,
strokeColor: '#000000',
strokeOpacity: 0.75,
strokeWeight: 1,
fillColor: fillColor,
fillOpacity: 1,
}
);
polygon.setMap(map);