Vue实现百度地图并添加热力图（附源码）

1. 效果图

2. vue项目中调用百度地图API使用介绍

开始需要先申请秘钥（ak）才可以使用，如需获取更高的配额，需要申请认证企业用户。百度地图API 链接地址：http://lbsyun.baidu.com/apiconsole/key，访问进去登录百度账号即可申请。

3. 创建vue项目

vue init webpack 项目名称

3.1. 在vue项目中安装百度地图组件库

npm install --save vue-baidu-map

3.2. 在main.js中添加BMap

import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
  ak: '您的AK秘钥'
})

3.3. 在index.html中添加百度地图JavaScript API接口

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>

3.4. 在 webpack.base.conf.js 配置文件中配置BMap

在module.exports 中与entry平级；如果还有其他的，同样在下面引入就可以了

3.5. 创建map.vue

<template>
	<!-- :center表示定位, 可使用如“广州市海珠区”的地区字符串，
	也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
	:zoom表示缩放等级；:scroll-wheel-zoom表示允许鼠标滚轮缩放 -->
  <baidu-map class="map" :center="{lng: 123.425867, lat: 41.918989}" :zoom="13" :scroll-wheel-zoom=true style="width: auto; height: 480px;">
    <!-- 全景 -->
    <bm-panorama></bm-panorama>
    <!-- 地图类型 -->
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
    <!-- :max表示权重最大值；:radius表示热力图半径；:gradient表示热力图渐变区间，
    	其中 key 表示插值的位置，取值范围 0 ~ 1，value 为颜色值。 -->
    <bml-heatmap :data="data" :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 {
      data: [
          // 热力图的点数据，lng：点的经度 lat: 点的纬度 count：点的热力程度
          {"lng":123.418261,"lat":41.921984,"count":50},
          {"lng":123.423332,"lat":41.916532,"count":81},
          {"lng":122.419787,"lat":43.930658,"count":25},
          {"lng":122.418455,"lat":43.920921,"count":30},
          {"lng":120.418843,"lat":40.915516,"count":100},
          {"lng":120.42546,"lat":40.918503,"count":18},
          {"lng":124.423289,"lat":44.919989,"count":38},
          {"lng":124.418162,"lat":44.915051,"count":80},
          {"lng":126.422039,"lat":45.91782,"count":21},
          {"lng":126.41387,"lat":45.917253,"count":16},
          {"lng":126.41773,"lat":45.919426,"count":72},
          {"lng":123.421107,"lat":41.916445,"count":4},
          {"lng":123.417521,"lat":41.917943,"count":27},
          {"lng":123.419812,"lat":41.920836,"count":23},
          {"lng":123.420682,"lat":41.91463,"count":60},
          {"lng":123.415424,"lat":41.924675,"count":8},
          {"lng":123.419242,"lat":41.914509,"count":15},
          {"lng":123.422766,"lat":41.921408,"count":25},
          {"lng":123.421674,"lat":41.924396,"count":21},
          {"lng":123.427268,"lat":41.92267,"count":1},
          {"lng":123.417721,"lat":41.920034,"count":51},
          {"lng":123.412456,"lat":41.92667,"count":7},
          {"lng":123.420432,"lat":41.919114,"count":11},
          {"lng":123.425013,"lat":41.921611,"count":35},
          {"lng":123.418733,"lat":41.931037,"count":22},
          {"lng":123.419336,"lat":41.931134,"count":4},
           {"lng":123.413557,"lat":41.923254,"count":5},
           {"lng":123.418367,"lat":41.92943,"count":3},
           {"lng":123.424312,"lat":41.919621,"count":100},
           {"lng":123.423874,"lat":41.919447,"count":87},
           {"lng":123.424225,"lat":41.923091,"count":32},
           {"lng":123.417801,"lat":41.921854,"count":44},
           {"lng":123.417129,"lat":41.928227,"count":21},
           {"lng":123.426426,"lat":41.922286,"count":80},
           {"lng":123.421597,"lat":41.91948,"count":32},
           {"lng":123.423895,"lat":41.920787,"count":26},
           {"lng":123.423563,"lat":41.921197,"count":17},
           {"lng":123.417982,"lat":41.922547,"count":17},
           {"lng":123.426126,"lat":41.921938,"count":25},
           {"lng":123.42326,"lat":41.915782,"count":100},
           {"lng":123.419239,"lat":41.916759,"count":41},
           {"lng":123.417185,"lat":41.929123,"count":11},
           {"lng":123.417237,"lat":41.927518,"count":9},
           {"lng":123.417784,"lat":41.915754,"count":47},
           {"lng":123.420193,"lat":41.917061,"count":52},
           {"lng":123.422735,"lat":41.915619,"count":100},
           {"lng":123.418495,"lat":41.915958,"count":46},
           {"lng":123.416292,"lat":41.931166,"count":9},
           {"lng":123.419916,"lat":41.924055,"count":8},
           {"lng":123.42189,"lat":41.921308,"count":11},
           {"lng":123.413765,"lat":41.929376,"count":3},
           {"lng":123.418232,"lat":41.920348,"count":50},
           {"lng":123.417554,"lat":41.930511,"count":15},
           {"lng":123.418568,"lat":41.918161,"count":23},
           {"lng":123.413461,"lat":41.926306,"count":3},
           {"lng":123.42232,"lat":41.92161,"count":13},
           {"lng":123.4174,"lat":41.928616,"count":6},
           {"lng":123.424679,"lat":41.915499,"count":21},
           {"lng":123.42171,"lat":41.915738,"count":29},
           {"lng":123.417836,"lat":41.916998,"count":99},
           {"lng":123.420755,"lat":41.928001,"count":10},
           {"lng":123.414077,"lat":41.930655,"count":14},
           {"lng":123.426092,"lat":41.922995,"count":16},
           {"lng":123.41535,"lat":41.931054,"count":15},
           {"lng":123.413022,"lat":41.921895,"count":13},
           {"lng":123.415551,"lat":41.913373,"count":17},
           {"lng":123.421191,"lat":41.926572,"count":1},
           {"lng":123.419612,"lat":41.917119,"count":9},
           {"lng":123.418237,"lat":41.921337,"count":54},
           {"lng":123.423776,"lat":41.921919,"count":26},
           {"lng":123.417694,"lat":41.92536,"count":17},
           {"lng":123.415377,"lat":41.914137,"count":19},
           {"lng":123.417434,"lat":41.914394,"count":43},
           {"lng":123.42588,"lat":41.922622,"count":27},
           {"lng":123.418345,"lat":41.919467,"count":8},
           {"lng":123.426883,"lat":41.917171,"count":3},
           {"lng":123.423877,"lat":41.916659,"count":34},
           {"lng":123.415712,"lat":41.915613,"count":14},
           {"lng":123.419869,"lat":41.931416,"count":12},
           {"lng":123.416956,"lat":41.925377,"count":11},
           {"lng":123.42066,"lat":41.925017,"count":38},
           {"lng":123.416244,"lat":41.920215,"count":91},
           {"lng":123.41929,"lat":41.915908,"count":54},
           {"lng":123.422116,"lat":41.919658,"count":21},
           {"lng":123.4183,"lat":41.925015,"count":15},
           {"lng":123.421969,"lat":41.913527,"count":3},
           {"lng":123.422936,"lat":41.921854,"count":24},
           {"lng":123.41905,"lat":41.929217,"count":12},
           {"lng":123.424579,"lat":41.914987,"count":57},
           {"lng":123.42076,"lat":41.915251,"count":70},
           {"lng":123.425867,"lat":41.918989,"count":8}
        // ...此处添加更多的数据集
      ]
    }
  }
}
</script>

去掉水印

<style>
  .BMap_cpyCtrl {
    display: none;
  }
  .anchorBL {
    display: none;
  }
</style>