如何为Google热图创建图例？

Question

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

很酷,我看到绿色.->.黄色.->.红色在我的地图上.看起来很好!

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

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

我可以使用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的未来版本中不起作用,甚至在当前版本中它可能在所有情况下都不起作用.