前言
当我们在规划旅游路线或是寻找热门商圈时,热力图无疑是一个非常有用的工具。而如何基于百度地图实现热力图,更是每位前端工程师都应该掌握的技能。本文将为大家介绍基于 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>