javascript - 如何根据预先确定的约束值自定义热图颜色？

Question

我正在研究热图，情况是我必须根据一些约束更改热图标记的颜色，并且颜色应该根据这些基本约束值进行更改。 我的方法是这样的:

function HeatMapCreate(heatMapData, GetNumberFromString)
    //  heatMapData contains the object of LatLng and get number is the   constraint
    // which contains a number on the basis of which we set color
    // (green if 48 and red if 36 else yellow)
        {
            var gradient;
            var heatmap = new google.maps.visualization.HeatmapLayer(
                        {
                            data: heatMapData,
                        });
            heatmap.setOptions({ radius: heatmap.get('20') });

            if (GetNumberFromString == 36)
            {
                gradient = [For red color]
            }
            else if(GetNumberFromString == 48)
            {
             gradient = [For green color]
            }
            else
            {
                gradient = [For yellow color]

            }

            heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
            heatmap.setMap(map);
        }

如何实现这一目标？ 我有点惊讶这个答案没有一个答案(甚至评论)，这让我觉得要么问题太糟糕，要么不可能有不同颜色的热图标记？有人可以吗帮帮我？

Answer 1

您的倒数第二行代码看起来像是刚刚从 Google's example 复制的。它演示了两个渐变之间的切换。

heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);

老实说，这不是最好的例子；他们实际上要么将渐变设置为他们指定的渐变，要么将其设置为 null，即将渐变默认回 Google 的默认配色方案。

相反，您想要做的是已经定义了自己的所有渐变，然后根据 GetNumberFromString 值在它们之间切换。这是一个未经测试的示例。我为最后一个选择了“蓝色”颜色，只是因为它更容易!您可能想想出一套自己的颜色；我希望有在线工具可以很快为您生成这些内容，例如http://angrytools.com/gradient/

function HeatMapCreate(heatMapData, GetNumberFromString) {
    var gradients = {
        red: [
            'rgba(255, 0, 0, 0)',
            'rgba(255, 0, 0, 1)'
        ],
        green: [
            'rgba(0, 255, 0, 0)',
            'rgba(0, 255, 0, 1)'
        ],
        blue: [
            'rgba(0, 0, 255, 0)',
            'rgba(0, 0, 255, 1)'
        ]
    };
    var heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatMapData,
        radius: 20,
        map: map
    });

    switch (GetNumberFromString) {
        case 36:
            heatmap.set('gradient', gradients['red']);
            break;
        case 48:
            heatmap.set('gradient', gradients['green']);
            break;
        default:
            heatmap.set('gradient', gradients['blue']);
            break;

    }
}

另请参阅: https://developers.google.com/maps/documentation/javascript/heatmaplayer