vue基于百度地图实现热力图

Posted 2022-02-19 水星记_

前言

今天接到一个需求要实现在百度地图中将高排放车辆以热力图的形式展现在地图中，下面是具体的实现过程：

实现效果

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>