如何在預定約束值上自定義熱圖顏色？

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的示例中復制的一樣，該示例演示了在兩個漸變之間進行切換。

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

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