vue百度热力图

最新推荐文章于 2025-04-14 09:23:49 发布

Best'

最新推荐文章于 2025-04-14 09:23:49 发布

阅读量1.2k

点赞数 2

分类专栏： java

本文链接：https://blog.youkuaiyun.com/weixin_44252277/article/details/106666288

版权

java 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成百度地图热力图功能，包括地图容器的创建、热力图覆盖物的添加及地图样式的设定。通过具体代码示例，读者可以了解如何利用BMap API和Heatmap Overlay实现数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue百度热力图

html

	<script src="http://api.map.baidu.com/api?v=2.0&ak="你的密钥""></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        ul, li {
            list-style: none;
            margin: 0;
            padding: 0;
            float: left;
        }

        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
            font-family: "微软雅黑";
        }

        #container {
            height: 100%;
            width: 100%;
        }

        #r-result {
            width: 100%;
        }
    </style>
//地图容器
<div id="container">
</div>

javascript

let baiMap = new Vue({
        el: '#container',
        data() {
            return {
                points: [
                    {"lng": 116.418261, "lat": 39.921984, "count": 50},
                    {"lng": 116.423332, "lat": 39.916532, "count": 51},
                    {"lng": 116.419787, "lat": 39.930658, "count": 15},
                    {"lng": 116.418455, "lat": 39.920921, "count": 40},
                    {"lng": 116.418843, "lat": 39.915516, "count": 100},
                    {"lng": 116.42546, "lat": 39.918503, "count": 6},
                    {"lng": 116.423289, "lat": 39.919989, "count": 18},
                    {"lng": 116.418162, "lat": 39.915051, "count": 80},
                    {"lng": 116.422039, "lat": 39.91782, "count": 11},
                    {"lng": 116.41387, "lat": 39.917253, "count": 7}],
                centerLng: '116.418261',//经度121.48789949,31.24916171
                centerLat: '39.921984',//维度
                map: '',//保存地图实例
                heatmapOverlay: {},//热力图覆盖物
            };

        },
        mounted() {
            this.initBaiMap();
        },
        methods: {
            //init 创建和初始化地图
            initBaiMap() {
                this.createMap();
                this.initHeatMap();
            },
            //创建地图
            createMap() {
                // 创建地图实例
                let map = new BMap.Map("container");
                //将map变量存储全局
                this.map = map;
                //设定地图的中心点
                let point = new BMap.Point(this.centerLng, this.centerLat);
                //设置中心点坐标和级别
                this.map.centerAndZoom(point, 15);
                //允许滚轮缩放
                this.map.enableScrollWheelZoom();
                // 添加左上角缩放比例尺(offset: new BMap.Size(0, 0)为比例尺的坐标位置)
                //let opts = {offset: new BMap.size(10, 10)}
                //this.map.addControl(new BMap.NavigationControl(opts));
                // 设置地图默认缩放比例
                this.map.setZoom(15);
                if (!this.isSupportCanvas()) {
                    alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
                }
                /*
                <option value="normal">默认地图样式</option> //系统默认
                <option value="light">清新蓝风格</option> //不需要第三方库
                <option value="dark">黑夜风格</option>    //不需要第三方库
                <option value="redalert">红色警戒风格</option>
                <option value="googlelite">精简风格</option>
                <option value="grassgreen">自然绿风格</option>
                <option value="midnight">午夜蓝风格</option>
                <option value="pink">浪漫粉风格</option>
                <option value="darkgreen">青春绿风格</option>
                <option value="bluish">清新蓝绿风格</option>
                <option value="grayscale">高端灰风格</option>
                <option value="hardedge">强边界风格</option>
                let  mapStyle ={
                    features: ["road","building","water","land"],//隐藏地图上的"poi",
                    style : "grayscale",
                };
                this.map.setMapStyle(mapStyle);*/
            },
            // 方法 - 添加热力图覆盖物
            initHeatMap () {
                this.heatmapOverlay = new BMapLib.HeatmapOverlay({
                    // 热力图的每个点的半径大小
                    'radius': BMAP_POINT_SIZE_SMALL * 4,
                    // 热力的透明度0~1
                    'opacity': 0.8,
                    // 其中 key 表示插值的位置0~1，value 为颜色值
                    'gradient': {
                        0:'rgb(102, 255, 0)',
                        .5:'rgb(255, 170, 0)',
                        1:'rgb(255, 0, 0)'
                    }
                })
                // 清除图层(每次重新调用需要清除上一个覆盖物图层)
                this.map.clearOverlays();
                // 添加热力覆盖物
                this.map.addOverlay(this.heatmapOverlay);
                this.heatmapOverlay.setDataSet({data: this.points, max: 100});
                // 显示热力图，隐藏为this.heatmapOverlay.hide();
                this.heatmapOverlay.show();
            },
            //判断浏览区是否支持canvas
            isSupportCanvas() {
                let elem = document.createElement('canvas');
                return !!(elem.getContext && elem.getContext('2d'));
            },
            showMap() {
                heatmapOverlay.show();
            },
            hideMap() {
                heatmapOverlay.hide();
            }
        }
    });