javascript - 放大谷歌地图时多边形颜色重叠

Question

我之前曾在 Stackoverflow 上以不同的标题发布过这个问题，但没有得到太多回应。这次再次发布并进行更多说明。

我已经使用 V3 js API 实现了谷歌地图。我正在 map 内绘制大约 500 个邮政编码多边形。邮政编码多边形的颜色取决于某些工作正常的条件。就像我为一组邮政编码分配不同的颜色一样。但问题是，当我放大 map 时，某些多边形颜色与其他多边形颜色重叠。

例如:我正在从数据库中提取 30 个邮政编码。我将这 30 个邮政编码分为 5 个区域(比如根据最高销售额到最低销售额)。每个区域都将用特定的颜色进行标记。因此，在这种情况下，将用 5 个区域绘制 30 个多边形，以便具有 5 种不同的颜色。现在，当我放大 map 时，分组没有变化，但某些多边形(可能是 3-4)颜色与其他多边形重叠。如果 3 号区域在法线贴图中的颜色为“黄色”，则当我放大 map 时，区域 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);

Answer 1

我已经找到解决办法了。基本上所有颜色都是通过服务器端脚本随机生成的，并传递到 map 模板。用于生成随机颜色的脚本有时会给出浏览器无法理解的 5 位颜色代码。因此，一些多边形区域采用附近多边形区域的颜色。现在我修改了服务器端脚本，这样如果脚本生成 5 位颜色代码，那么将在颜色代码中添加一个额外的随机数字，这最终将生成有效的颜色代码。