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

Posted 2023-03-28

【中文标题】如何根据预先确定的约束值自定义热图颜色？

【英文标题】：How to customize heatmap color on pre decided constraint values?

【发布时间】：2015-09-05 04:18:52

【问题描述】：

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

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);
        

如何做到这一点？ 我有点惊讶这个答案没有一个答案（甚至评论），这让我觉得要么问题太糟糕，要么不可能有不同颜色的热图标记？有人可以请帮帮我？

【参考方案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

【讨论】：

谢谢.. 让我试试会尽快标记为答案。

ReferenceError: invalid assignment left-hand side at line where we do "'red' = [......]"

我通过从红色、绿色和蓝色中删除单引号解决了这个问题，但现在的问题是它总是执行切换条件的默认条件，即使我在 console.log 上也看到 GetNumberFromString 值 36 和 48 .可能的原因是什么？我也试过用单引号（'48'）覆盖，但仍然不起作用。

抱歉，我的基本 JS 错误应该是 gradients = key: value, ... 而不是 gradients = [key = value, ...]

GetNumberFromString 是什么，它来自哪里？它是字符串 ('36')、整数 (36) 还是浮点数 (36.0)，还是其他？

【参考方案2】：

您无法使用单个热图实现不同的颜色。您必须根据 GetNumberFromString 函数的返回值，为要显示的每种颜色使用单独的热图图层。

查看下面的代码。

function initialize() 
  geocoder = new google.maps.Geocoder();
  var mapProp = 
    center: new google.maps.LatLng(40.785091, -73.968285),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  ;
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  codeAddress("10001", 'rgba(1, 1, 0, 0)', 'rgba(1, 1, 0, 1)');
  codeAddress("10002", 'rgba(255, 255, 0, 0)', 'rgba(255, 255, 0, 1)');
  codeAddress("10003", 'rgba(255, 0, 0, 0)', 'rgba(255, 0, 0, 1)');
  codeAddress("10004", 'rgba(0, 255, 0, 0)', 'rgba(0, 255, 0, 1)');
  codeAddress("10005", 'rgba(153, 0, 153, 0)', 'rgba(153, 0, 153, 1)');
  codeAddress("10006", 'rgba(1, 1, 0, 0)', 'rgba(1, 1, 0, 1)');

  function codeAddress(zip, rgbA1, rgbA2) 
    //var address = document.getElementById("address").value;
    geocoder.geocode(
      'address': zip
    , function(results, status) 
      if (status == google.maps.GeocoderStatus.OK) 
        map.setCenter(results[0].geometry.location);

        var hotSpot = results[0].geometry.location;

        var heatMapZip = [
            location: hotSpot
          

        ];

        var heatmap = new google.maps.visualization.HeatmapLayer(
          data: heatMapZip,
          radius: 20,
          dissapating: false
        );

        var gradient = [rgbA1, rgbA2];
        heatmap.set('gradient', gradient);
        heatmap.setMap(map);

       else 
        alert("Geocode was not successful for the following reason: " + status);
      
    );
  




google.maps.event.addDomListener(window, 'load', initialize);