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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！