谷歌地图热力图

作者: 新世纪好青年 | 来源:发表于2020-02-28 14:09 被阅读0次

谷歌地图热力图
Google map生成热力图
超级好用的谷歌地图,使用体验好,还有好玩的谷歌街景带你看遍世界
全球地图名单
recharts 热力图
腾讯地图热力图
来自谷歌的创业故事《谷歌方法》
热力图原理及ArcGIS Pro 制作热力图
百度地图聚合折腾
iOS谷歌地图集成

热力图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>热力图</title>
        <style>
            #map{
                width: 800px;
                height: 800px;
            }
        </style>
        <script src="http://maps.googleapis.com/maps/api/js?key=key&language=en&libraries=drawing,geometry,visualization"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <script type="text/javascript">
        var centerPoint = new google.maps.LatLng(31.2351581719, 121.5060055700); //金茂大厦
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            minZoom: 1,
            center: centerPoint,
            // styles : styleJson,
            zoomControl: false, // 启用/禁用缩放控件
            mapTypeControl: false, // 启用/禁用允许用户在地图类型（例如地图和卫星）之间切换的地图类型控件
            scaleControl: false, // 启用/禁用提供简单地图比例的“缩放”控件
            streetViewControl: false, // 启用/禁用Pegman控件
            rotateControl: false, // 启用/禁用旋转控件的外观以控制45°图像的方向
            fullscreenControl: false, // 是否全屏 此控件在移动设备上可见，在桌面上不可见
            gestureHandling: 'greedy', // 属性设置
            // greedy为触摸屏和移动设备，以允许用户在用户滑动（拖动）屏幕时平移地图（向上或向下，向左或向右）。换句话说，单指滑动和双指滑动都可以使地图平移。
        });
        mapHeat();
        google.maps.event.addDomListener(window, 'load', function() {
            mapHeat();
        });

        // 拖拽
        google.maps.event.addListener(map, 'dragend', function() {
            mapHeat();
        });
        // 缩放
        google.maps.event.addListener(map, 'zoom_changed', function() {
            mapHeat();
        });

        function mapHeat() {
            var points=[{"lng":116.418261,"lat":39.921984},{"lng":116.423332,"lat":39.916532},
            {"lng":116.419787,"lat":39.930658},
            {"lng":116.418455,"lat":39.920921},
            {"lng":116.418843,"lat":39.915516},
            {"lng":116.42546,"lat":39.918503},
            {"lng":116.423289,"lat":39.919989},
            {"lng":116.418162,"lat":39.915051},
            {"lng":116.422039,"lat":39.91782},
            {"lng":116.41387,"lat":39.917253}];
            /* 热力图 */
            var heatmapData = [];
            for (var i = 0; i < points.length; i++) {
                heatmapData.push(new google.maps.LatLng(points[i].lat, points[i].lng));
            }
            heatmap = new google.maps.visualization.HeatmapLayer({
                data: heatmapData
                // 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.setMap(map);

            map.panTo(new google.maps.LatLng(points[0].lat, points[0].lng));
        }
    </script>
</html>