Javascript 基于值更改google热图点颜色

我需要根据该点的空气质量指数（aqi）为热图中的不同点上色。这是我第一次尝试创建热图，我的主管坚持我只使用谷歌热图创建热图。我从一个JSON对象获取数据，该对象从python中的视图传递到我的HTML模板。我读到谷歌热图是基于密度而不是价值，但密度不是我的一个因素。我一直在四处搜索，发现了一些类似的问题：但还没有人回答。 我想根据aqi值为点上色，例如：

• 0-50绿色
• 51-100黄色
• 101-150橙色
• 151-200红色
• 201-300紫色

我的JSON数据如下所示：

{
  "lat": 44.0682019, 
  "data_value": {"pm10": "0","pm25": "21"}, 
  "lon": -114.7420408, 
  "aqi": 70.0
}

以下是我的javascript代码：

<script>     
      var json_data = {{ data|safe }};
      var map, heatmap;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: {lat: 0, lng: 0},
          minZoom: 2, 
          maxZoom: 18

        });

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

      function changeGradient() {
        var gradient = [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
        heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
      }

      function changeRadius() {
        heatmap.set('radius', heatmap.get('radius') ? null : 50);
      }

      function changeOpacity() {
        heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
      }
      function getPoints() {
        var location = [];
        for(var i = 0; i < json_data.length; i++) {
          var obj = json_data[i];
          if(obj.aqi < 150) {
            location[i] = {location: new google.maps.LatLng(obj.lat, obj.lon), weight:Math.pow(obj.aqi, 1)};
          } else if(obj.aqi > 150 && obj.aqi < 300) {
            location[i] = {location: new google.maps.LatLng(obj.lat, obj.lon), weight:Math.pow(obj.aqi, 5)};
          } else {
            location[i] = {location: new google.maps.LatLng(obj.lat, obj.lon), weight:Math.pow(obj.aqi, 10)};
          }

        }
        return location;
      }
</script>

var json_data={{data}safe}；
var图、热图；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：2，
中心：{lat:0，lng:0}，
minZoom:2，
最大缩放：18
});
heatmap=新建google.maps.visualization.HeatmapLayer({
数据：getPoints（），
半径：50，
失望：错，
地图：地图
});
}
函数changeGradient（）{
var梯度=[
'rgba（0，255，255，0）'，
'rgba（0，255，255，1）'，
'rgba（0，191，255，1）'，
'rgba（0，127，255，1）'，
'rgba（0,63,255,1）'，
'rgba（0,0,255,1）'，
"rgba(0,0223,1)",，
‘rgba（0,0191,1）’，
"rgba(0,0,159,1)",，
'rgba（0,0,127,1）'，
"rgba(63,0,91,1)",，
"rgba(127,0,63,1)",，
"rgba(191,0,31,1)",，
'rgba（255,0,0,1）'
]
heatmap.set（'gradient'，heatmap.get（'gradient'）？null:gradient）；
}
函数changeRadius（）{
heatmap.set（'radius'，heatmap.get（'radius'）？null:50）；
}
函数changeOpacity（）{
heatmap.set（'opacity'，heatmap.get（'opacity'）？null:0.2）；
}
函数getPoints（）{
var位置=[]；
对于（var i=0；i150和&obj.aqi<300）{
location[i]={location:new google.maps.LatLng（obj.lat，obj.lon），weight:Math.pow（obj.aqi，5）}；
}否则{
location[i]={location:new google.maps.LatLng（obj.lat，obj.lon），weight:Math.pow（obj.aqi，10）}；
}
}
返回位置；
}

我一直在玩弄重量，试图让它反映值的变化，而不是密度，但我仍然没有得到想要的结果

---

提前感谢您的帮助。

我想您已经了解了谷歌热图的基本工作原理。 所以基本上我得到的解决方案是，根据你想要的颜色数量创建不同的数组，同时也基于颜色创建不同的热图变量。我承认这不是最好的解决方案（性能方面），但它确实起到了作用。 与您不同，我使用的是一个数据库中的数据，该数据库使用Php进行拉取，但逻辑保持不变。 这是我的密码：

var dataheat = [];
var dataheat1 = [];
var dataheat2 = [];



function initMap() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: new google.maps.LatLng(-25.7479, 28.2293),
  mapTypeId: 'satellite',
  zoom: 6,
  maxZoom: 16,
  minZoom: 6
 });



 // pull data from database using php
  downloadUrl('location.php', function(data) {
  var xml = data.responseXML;

var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {

  var  aqi =  parseFloat(markerElem.getAttribute('aqi'));
  var point = new google.maps.LatLng(
      parseFloat(markerElem.getAttribute('lat')),
      parseFloat(markerElem.getAttribute('lng')));


  for (var i=0; i <= markers.length; i++)
  {
    if(aqi < 98)
      {dataheat.push(point);}
    else if( aqi > 98 && aqi < 100)
      {dataheat1.push(point);}
    else if (aqi = 100)
     { dataheat2.push(point);}
    else{
        //nothing
    }

  }


});

   var yellow = [
            'rgba(255, 255, 0, 0)',
            'rgba(255, 255, 0, 1)'
            ];

  var red = [
        'rgba(255, 0, 0, 0)',
        'rgba(255, 0, 0, 1)'
        ];

  var green = [
          'rgba(0, 255, 0, 0)',
          'rgba(0, 255, 0, 1)'
          ];

 var heatmap = new google.maps.visualization.HeatmapLayer({

      data: dataheat,
      map:map,
      radius: 24

});
  var heatmap1 = new google.maps.visualization.HeatmapLayer({

      data: dataheat1,
      map:map,
      radius: 24

});
   var heatmap2 = new google.maps.visualization.HeatmapLayer({

      data: dataheat2,
      map:map,
      radius: 24

});

heatmap.set('gradient', heatmap.get('gradient') ? null : red);
heatmap1.set('gradient', heatmap1.get('gradient') ? null : yellow);
heatmap2.set('gradient', heatmap2.get('gradient') ? null : green);


   });
  }

  function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
  new ActiveXObject('Microsoft.XMLHTTP') :
  new XMLHttpRequest;

  request.onreadystatechange = function() {
  if (request.readyState == 4) {
  request.onreadystatechange = doNothing;
  callback(request, request.status);
  }
 };

  request.open('GET', url, true);
  request.send(null);
   }

  function doNothing() {}

var-dataheat=[]；
var dataheat1=[]；
var dataheat2=[]；
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：新google.maps.LatLng（-25.7479,28.2293），
mapTypeId:'卫星'，
缩放：6，
maxZoom:16，
最小缩放：6
});
//使用php从数据库中提取数据
下载URL（'location.php'，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（'marker'）；
Array.prototype.forEach.call（markers，function（markereem））{
var-aqi=parseFloat（markerem.getAttribute（'aqi'））；
var point=new google.maps.LatLng(
parseFloat（markerem.getAttribute（'lat'）），
parseFloat（markerem.getAttribute（'lng'））；
对于（变量i=0；i 98&&aqi<100）
{dataheat1.push（点）；}
否则如果（aqi=100）
{dataheat2.push（点）；}
否则{
//没什么
}
}
});
黄色变量=[
'rgba（255，255，0，0）'，
'rgba（255，255，0，1）'
];
变量红色=[
“rgba（255,0,0,0）”，
'rgba（255,0,0,1）'
];
绿色变量=[
'rgba（0，255，0，0）'，
'rgba（0，255，0，1）'
];
var heatmap=new google.maps.visualization.HeatmapLayer({
数据：数据热，
地图：地图，
半径：24
});
var heatmap1=新的google.maps.visualization.HeatmapLayer({
数据：dataheat1，
地图：地图，
半径：24
});
var heatmap2=新的google.maps.visualization.heatmapplayer({
数据：dataheat2，
地图：地图，
半径：24
});
heatmap.set（'gradient'，heatmap.get（'gradient'）？空值：红色）；
heatmap1.set（'gradient'，heatmap1.get（'gradient'）？null:黄色）；
heatmap2.set（'gradient'，heatmap2.get（'gradient'）？空值：绿色）；
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}

听起来您只是想在指定位置放置具有指定颜色的标记。为什么你需要热图？我的公司想用热图，因为它看起来不错。我发现这和我想做的很相似。geocodezip有没有办法改变热图中特定点的颜色？