javascript - 如何为谷歌热图创建图例？

Question

我使用 Google maps API v3 和后端的 DB 应用程序绘制了热图。

酷，我在我的地图上看到了绿色.->.黄色.->.红色渐变。看起来不错！

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

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

我可以使用 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 的未来版本中不起作用，甚至在当前版本中也可能不适用于所有情况。