如何为Google热图创建图例？

Question

我使用谷歌地图API v3和后端的数据库应用程序绘制了热图。

很酷，我看到了绿色.-＆gt; .yellow .-＆gt; .red在我的地图上。看起来很好！

但我怎样才能获得这些颜色的值？

浅绿色和深红色的平均重量是多少？

我可以使用goolge API实现这样的“图例”，还是需要编写某种自定义JS功能？

Answer 1

截至今天，似乎没有官方的方式通过API获取热图传奇，这意味着你在这里独自一人。要构建图例，您需要以下两个成分。

1. 热图的渐变颜色的定义
2. 最大密度 - 即图例的高端（低端始终为0）

先决条件

以下代码段假设您的HTML包含图例和图例渐变的容器，并且您已创建了有效的地图和热图。

<div id="map"></div>
<div id="legend">
    <div id="legendGradient"></div>
</div>
<script type="text/javascript">
    function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
            ...
        });

        heatmap = new google.maps.visualization.HeatmapLayer({
            data: ...
        });

        heatmap.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

渐变

热图实际上包含一个属性gradient，但是，该属性不会填充默认渐变，而只会保存您手动分配给热图的那些渐变规范。因此，为了获得精确的梯度规格，您需要自己定义颜色。之后，您只需使用CSS在图例中绘制渐变。

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

heatmap.set('gradient', gradient);

var gradientCss = '(left';
for (var i = 0; i < gradient.length; ++i) {
    gradientCss += ', ' + gradient[i];
}
gradientCss += ')';

$('#legendGradient').css('background', '-webkit-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-moz-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-o-linear-gradient' + gradientCss);
$('#legendGradient').css('background', 'linear-gradient' + gradientCss);

最大密度

最高密度无法通过API正式提供。但是，逻辑告诉我们必须将值存储在对象的某个位置。使用Chrome的JavaScript控制台进行一些研究，我发现值存储在heatmap['gm_bindings_']['data'][158]['kd']['D']下。但是，只有在渲染地图后才能设置该值。因此，您需要将对该字段的访问权限包装到tilesloaded事件处理程序中。

一旦获得最大密度，就可以直接生成图例的刻度和标签。以下代码段在图例的渐变下方创建了刻度和标签，假设其高度为15px。

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    var maxIntensity = heatmap['gm_bindings_']['data'][158]['kd']['D'];
    var legendWidth = $('#legendGradient').outerWidth();

    for (var i = 0; i <= maxIntensity; ++i) {
        var offset = i * legendWidth / maxIntensity;
        if (i > 0 && i < maxIntensity) {
            offset -= 0.5;
        } else if (i == maxIntensity) {
            offset -= 1;
        }

        $('#legend').append($('<div>').css({
            'position': 'absolute',
            'left': offset + 'px',
            'top': '15px',
            'width': '1px',
            'height': '3px',
            'background': 'black'
        }));
        $('#legend').append($('<div>').css({
            'position': 'absolute',
            'left': (offset - 5) + 'px',
            'top': '18px',
            'width': '10px',
            'text-align': 'center'
        }).html(i));
    }
});

结束事情

可以在JSFiddle上找到上述代码的工作示例。



请注意，确定最大密度的方式完全是非官方的，没有记录。它可能在API的未来版本中不起作用，甚至在当前版本中它可能在所有情况下都不起作用。