我之前在 Stackoverflow 中以不同的标题发布了这个问题,但没有得到太多回应。这次再次发布,并进行更多说明。
我已经使用 V3 js API 实现了一个谷歌地图。我在地图内绘制了大约 500 个邮政编码多边形。邮政编码多边形的着色取决于某些工作正常的条件。就像我为一组邮政编码分配不同的颜色一样。但问题是当我放大地图时,一些多边形颜色与其他多边形颜色重叠。
例如:我正在从我的数据库中提取 30 个邮政编码。我将这 30 个邮政编码划分为 5 个区域(比如根据最高销售额到最低销售额)。每个区域都将用特定的颜色标记。因此在这种情况下,将绘制 30 个多边形和 5 个区域,从而具有 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);