Как создать легенду для Google Heatmap?

Ответ 1

На сегодняшний день, похоже, нет официального способа получить легенду Heatmap через API, что означает, что вы здесь сами. Чтобы построить легенду, вам понадобятся следующие два компонента.

• Определение цветов градиента тепловой карты
• Максимальная плотность - это верхний предел легенды (нижний конец всегда равен 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, и даже в текущей версии он может не работать во всех случаях.