其他分享
首页 > 其他分享> > vue结合百度地图实现热力图

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

作者:互联网

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

功能描述

 结合百度地图实现热力图功能我们可在[Apache ECharts](https://echarts.apache.org/examples/zh/index.html#chart-type-heatmap)看到示例代码,实现效果大致如下。

热力图

插件安装

  1. npm 安装
$ npm install vue-baidu-map --save
  1. 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>
  1. 页面实现
<!--: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](https://dafrok.github.io/vue-baidu-map/#/zh/control/navigation)网站。

标签:baidu,map,vue,力图,components,import,lng,百度
来源: https://blog.csdn.net/weixin_44487537/article/details/118702510