Google Maps API 热图层 - 单一渐变，两个极端答案

【问题标题】：Google Maps API Heatmap Layer - Single gradient, Two extremesGoogle Maps API 热图层 - 单一渐变，两个极端
【发布时间】：2014-05-26 22:42:52
【问题描述】：

假设我以通常的方式设置了一个谷歌热图图层：

  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 附近的 data 为红色，并且没有数据的区域被单独放置。

有什么建议吗？

【问题讨论】：

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

【解决方案1】：

您应该将第一个渐变设置为无（或很少）不透明度。

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)']

【讨论】：

可能不是 OP 想要的东西。我也陷入了这个困境。

【解决方案2】：

你能在绘制数据之前修改它吗？

if (num > 0.5)
    num = 1 - num

现在 0 附近的数字将与 1 附近的数字相同，并且可以使用常规梯度。

【讨论】：