Google Maps API热图图层 - 单个渐变,两个极端

Question

假设我以通常的方式设置了Google热图图层:

  heatmap = new google.maps.visualization.HeatmapLayer({
    radius: 20,
    opacity: 0.5,
    gradient: g
  });

  heatmap.setMap(map);

哪里:

  var g = [
    'rgba(255, 0, 0, 1)',
    'rgba(255, 255, 0, 0.9)',
    'rgba(0, 255, 0, 0.7)',
    'rgba(173, 255, 47, 0.5)',
    'rgba(152, 251, 152, 0)',
    'rgba(152, 251, 152, 0)',
    'rgba(0, 0, 238, 0.5)',
    'rgba(186, 85, 211, 0.7)',
    'rgba(255, 0, 255, 0.9)',
    'rgba(255, 0, 0, 1)'

]

我正在热映射的事情取0到1的范围.我想显示一个热点,接近0和接近1的值和接近0.5的中性(冷)点.这就是为什么我有更高的不透明度接近该g变量的开头和结尾.

问题是热图图层将NO数据解释为0,因此将地图的空白区域热映射为红色.我想要的是0和1附近的数据是红色的,没有数据的区域是单独的.

有什么建议？

Answer 1

您应该将第一个渐变设置为no(或很少)不透明度.

var g = [
'rgba(255, 0, 0, 0)',
'rgba(255, 255, 0, 0.9)',
'rgba(0, 255, 0, 0.7)',
'rgba(173, 255, 47, 0.5)',
'rgba(152, 251, 152, 0)',
'rgba(152, 251, 152, 0)',
'rgba(0, 0, 238, 0.5)',
'rgba(186, 85, 211, 0.7)',
'rgba(255, 0, 255, 0.9)',
'rgba(255, 0, 0, 1)']