vue借助百度地图实现炫酷的热力图效果

前言

当我们在规划旅游路线或是寻找热门商圈时，热力图无疑是一个非常有用的工具。而如何基于百度地图实现热力图，更是每位前端工程师都应该掌握的技能。本文将为大家介绍基于 vue 框架如何实现百度地图热力图，并且通过实例演示，让你轻松掌握热力图的实现方法，让你的网站更具交互性和吸引力。

---

实现效果

---

1. 安装 baiduMap

1.1 首先要安装百度 map

npm install vue-baidu-map --save

1.2 在 main.js 文件中引入并全局注册

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '你的密钥'
})

1.3 在 public 文件夹下面的 index.html 文件中添加百度地图 JavaScript API 的接口

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

---

2. 组件中使用

属性	描述
:center	经纬度，可以替换成其它地区的经纬度
:zoom	地图缩放的值
:scroll-wheel-zoom	设置允许鼠标滚轮缩放
:map-types	地图类型
:max	热力最大值
:radius	热力图半径
:gradient	热力图渐变区间

---

代码实例

<template>
      <baidu-map :center="{lng:116.4, lat: 39.9}" :zoom="13" :scroll-wheel-zoom=true style="width: auto; height: 100%;">
          <!-- //是否需要全景 -->
          <bm-panorama></bm-panorama>
          <!-- //地图类型 -->
          <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
          <bml-heatmap :data="mapList" :max="100" :radius="20" :gradient="{.5:'rgb(0, 110, 255)',.8:'rgb(15, 255, 31)',.9:'rgb(225, 75, 0)'}"></bml-heatmap>
      </baidu-map>
</template>

<script>
  import {BmlHeatmap} from 'vue-baidu-map'//引人
  export default {
    components: {//注册
      BmlHeatmap
    },
    data() {
      return {
        //模拟的经纬度及热力值数据；lng：经度 lat: 纬度 count：热力值
        mapList: [
          {"lng":116.47,"lat":39.91,"count":50},
          {"lng":116.41,"lat":39.912,"count":28},
          {"lng":116.42,"lat":39.913,"count":95},
          {"lng":116.43,"lat":39.914,"count":9},
          {"lng":116.44,"lat":39.915,"count":85},
          {"lng":116.45,"lat":39.915,"count":20},
          {"lng":116.46,"lat":39.918,"count":25},
          {"lng":116.47,"lat":39.9101,"count":70},
          {"lng":116.48,"lat":39.941,"count":32},
          {"lng":116.49,"lat":39.918,"count":50},
          {"lng":116.410,"lat":39.91,"count":100},
          {"lng":116.411,"lat":39.914,"count":90},
          {"lng":116.412,"lat":39.915,"count":80},
          {"lng":116.413,"lat":39.918,"count":20},
        ]
      }
    }
  }
</script>

---

去掉百度地图 logo 水印

<style scoped>
 ::v-deep .BMap_cpyCtrl {
    display: none;
  }
  ::v-deep .anchorBL {
    display: none;
  }
</style>