谷歌热图根据强度改变颜色答案

【问题标题】：Google heat map change colour based on intensity谷歌热图根据强度改变颜色
【发布时间】：2015-09-29 07:27:58
【问题描述】：

我使用 google maps js api 制作了一张热图。所有位置都是加权的，并且希望颜色代表权重，而不是我得到一个红点，它逐渐变成黄色然后变成绿色。不，这只是一个测试，我将从数据库中填充邮政编码和重量

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script>

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", 6119);
  codeAddress("10002", 5180);
  codeAddress("10003", 4110);
  codeAddress("10004", 899);
  codeAddress("10005", 520);
  codeAddress("10006", 599);

   function codeAddress(zip, noAccidents) {
    //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;
        console.log(hotSpot + " " + noAccidents);

        var heatMapZip = [
        {location: hotSpot, weight: noAccidents}

        ];

       var color =[
            "#ff0000",
            "#00ff00"
        ];

        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatMapZip,
          radius: 50,
          dissapating: false
        });
        heatmap.setMap(map);

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


}

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

【问题讨论】：

您对“重量”与颜色的对应关系有些模糊。你的数组color 做什么？看起来没什么...为什么不将它作为 HeatmapLayerOptions 的 gradient 参数传递呢？另外注意：参数记录为dissipating 而不是dissapating

标签： javascript google-maps google-maps-api-3 maps heatmap

【解决方案1】：

您应该使用函数heatmap.set('gradient', gradient); 来设置热图的颜色。颜色可以通过事故的#以及数据集中#的最大值和最小值来计算。

我为此创建了一个小提琴，希望它有所帮助。

http://jsfiddle.net/hzy0y6es/

【讨论】：