Question

我之前在Stackoverflow中发布了这个问题，标题不同，但没有得到太多响应。再次发布这段时间并进行更多澄清。

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

例如：我从我的数据库中提取了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);

Answer 1

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

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

1 个答案: