Google Maps动画热图 [英] Google Maps Animated Heat Map

问题描述

我想知道是否可以为我为Google地图设置的热图制作动画.设置谷歌地图并向其添加热图非常容易.但是看起来很无聊.我想在热图上添加某种脉冲效果. 谢谢

I was wondering if it would be possible to animate the heat map I've set up for my Google Map. It was easy enough to set up the google map and add the heat map to it. But it looks quite boring. I wanted to add somekind of a pulse effect to the heat map. Thanks

推荐答案

为热图的外观设置动画很简单.下面的示例设置一个渐变颜色的自定义数组并调整其大小.结果是某种脉冲效应.您可以根据自己的喜好在modulateGradient函数中调整颜色，甚至可以更改热图的不透明度.但是请注意，根据数据集的大小，动画可能会对性能产生重大影响.

It's straightforward to animate the heatmap's appearance. The following example sets a custom array of gradient colors and modulates its size. The result is sort of a pulsing effect. You may tweak the colors to your liking in the modulateGradient function or even add changes to the heatmap's opacity. Note, however, that depending on the size of your data set the animation might have a considerable performance impact.

<div id="map-canvas"></div>

JS

var map, pointarray, heatmap;
var gradient, gradientStep = -1;

var taxiData = [
    new google.maps.LatLng(37.782551, -122.445368),
    new google.maps.LatLng(37.782745, -122.444586),
    new google.maps.LatLng(37.782842, -122.443688),
    new google.maps.LatLng(37.782919, -122.442815),
    new google.maps.LatLng(37.782992, -122.442112),
    new google.maps.LatLng(37.783100, -122.441461),
    new google.maps.LatLng(37.783206, -122.440829),
    new google.maps.LatLng(37.783273, -122.440324),
    new google.maps.LatLng(37.783316, -122.440023),
    new google.maps.LatLng(37.783357, -122.439794),
    new google.maps.LatLng(37.783371, -122.439687)
];

function initialize() {
    var mapOptions = {
        zoom: 13,
        center: new google.maps.LatLng(37.774546, -122.433523),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var pointArray = new google.maps.MVCArray(taxiData);

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

    heatmap.setMap(map);
    setGradient();

    google.maps.event.addListenerOnce(map, 'tilesloaded', modulateGradient);
}

function setGradient() {
    gradient = [
        'rgba(0, 255, 255, 0)',
        'rgba(0, 255, 255, 1)',
        'rgba(0, 191, 255, 1)',
        'rgba(0, 127, 255, 1)',
        'rgba(0, 63, 255, 1)',
        'rgba(0, 0, 255, 1)',
        'rgba(0, 0, 223, 1)',
        'rgba(0, 0, 191, 1)',
        'rgba(0, 0, 159, 1)',
        'rgba(0, 0, 127, 1)',
        'rgba(63, 0, 91, 1)',
        'rgba(127, 0, 63, 1)',
        'rgba(191, 0, 31, 1)',
        'rgba(255, 0, 0, 1)'
    ];
    heatmap.set('gradient', gradient);
}

function modulateGradient() {
    var modulator = function() {
        var newGradient = gradient.slice(0, heatmap.get('gradient').length + gradientStep);

        if (newGradient.length == gradient.length || newGradient.length == 7) {
            gradientStep *= -1;
        }

        heatmap.set('gradient', newGradient);

        setTimeout(modulator, 100);
    };

    setTimeout(modulator, 100);
}

google.maps.event.addDomListener(window, 'load', initialize);

您可以在 JSFiddle 上找到该代码的实时版本.

You can find a live version of the code on JSFiddle.

这篇关于Google Maps动画热图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！