时间戳

首页 > 解决方案 > 如何在热图图层中设置消散

javascript - 如何在热图图层中设置消散

问题描述

我正在尝试在热图图层中设置消散，但不了解如何执行此操作。谁能给我一个解决方案。

我为切换、渐变、半径和不透明度创建了按钮，这些按钮工作正常，我还创建了一个用于消散的按钮，并希望根据点击设置它的真假。

这是代码，

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Google HeatMap</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
        * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto','sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

        #floating-panel {
            background-color: #fff;
            border: 1px solid #999;
            left: 25%;
            padding: 5px;
            position: absolute;
            top: 10px;
            z-index: 5;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>Google Heatmap</h1>

    <div id="floating-panel">
        <button onclick="toggleHeatmap()">Toggle Heatmap</button>
        <button onclick="changeGradient()">Change gradient</button>
        <button onclick="changeRadius()">Change radius</button>
        <button onclick="changeOpacity()">Change opacity</button>
        <button onclick="changeDissipating()">Change Dissipating</button>
    </div>

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

    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-JTgcgGW8Om_r7BgCbOh7YeY94rEa0NE&libraries=visualization">
    </script>

    <script>

        /* Data points defined as a mixture of WeightedLocation and LatLng objects */
        function getPoints() {
            return [
                new google.maps.LatLng(5.784582, -55.062942),
                new google.maps.LatLng(5.617064, -55.09292),
                new google.maps.LatLng(5.786143, -54.944866)
            ];
        }

        var city = new google.maps.LatLng(5.784582, -55.062942);

        map = new google.maps.Map(document.getElementById('map'), {
            center: city,
            zoom: 13,
            mapTypeId: 'satellite'
        });

        var heatmap = new google.maps.visualization.HeatmapLayer({
            data: getPoints()
        });
        heatmap.setMap(map);

        function toggleHeatmap() {
            heatmap.setMap(heatmap.getMap() ? null : map);
        }

        function changeGradient() {
            var 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', heatmap.get('gradient') ? null : gradient);
        }

        function changeRadius() {
            heatmap.set('radius', heatmap.get('radius') ? null : 20);
        }

        function changeOpacity() {
            heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
        }

        //Dissipating
        function changeDissipating() {
            heatmap.setOption('dissipating', heatmap.get('dissipating') ? null : false);
        }

    </script>
</body>
</html>

提前致谢。

标签： javascripthtml

解决方案

setOption不是 的函数heatmap。你应该set()改用。您的代码changeDissipating()应如下所示：

function changeDissipating() {
    heatmap.set('dissipating', heatmap.get('dissipating') ? null : false);
}

推荐阅读