vue结合百度地图实现热力图

vue结合百度地图实现热力图

功能描述

结合百度地图实现热力图功能我们可在Apache ECharts看到示例代码，实现效果大致如下。

插件安装

1. npm 安装

$ npm install vue-baidu-map --save

2. package.json引入

"vue-baidu-map": "0.21.22"

vue页面实现

1. script代码

<script>
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    // 比例尺控件
    import BmScale from 'vue-baidu-map/components/controls/Scale'
    // 缩放控件
    import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
    // 点聚合
    import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
    // 点
    import BmMarker from 'vue-baidu-map/components/overlays/Marker'
    // 信息窗体
    import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
    // 热力图
    import BmlHeatmap from 'vue-baidu-map/components/extra/Heatmap'
    export default {
        components: {
            BaiduMap,BmNavigation,BmlHeatmap
        },
        data() {
            return {
             zoom: 12,
                heatMapDatas:[
                    /*{lng: 112.46829898217, lat: 34.681548131756, count: 32},
                    {lng: 112.48357017584, lat: 34.564954914466, count: 36},
                    {lng: 112.48806170339, lat: 34.563468584404, count: 33},
                    {lng: 111.65802741217, lat: 33.756948317877, count: 27}*/
                    // ...此处添加更多的数据集
                ],
                heatMaxData: 5,
                heatRadius: 4,
           },
           methods:{
                handler ({BMap, map}) {

                },
           }
        }
    }
</script>

2. 页面实现

<!--:scroll-wheel-zoom 通过鼠标滚轮缩放
    center 地图中心点位
    ak 登录百度地图开放平台申请（https://lbsyun.baidu.com/）
-->
<baidu-map class="map" center="洛阳" :zoom="zoom" @ready="handler"
                                   :scroll-wheel-zoom=true
                                   style="width: 100%;height: 340px;" ak="你的ak">
     <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
     <bml-heatmap :data="heatMapDatas" :max="heatMaxData" :radius="heatRadius" ></bml-heatmap>
</baidu-map>

以上就是在vue页面结合百度地图实现热力图的所有代码，关于地图具体配置信息，可参考Vue Baidu Map网站。