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

Я нарисовал Heatmap с помощью API карт Google v3 с приложением DB на бэкэнд.

Прохладный, я вижу зеленый.- > желтый.- > красный fradient над моей картой. Выглядит хорошо!

Но как я могу получить значения для этих цветов?

Какой средний вес для светло-зеленого цвета и темно-красного?

Могу ли я реализовать такую "легенду" с помощью API goolge или мне нужно написать какие-то пользовательские функции JS?

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