百度地图热力图的实现（一看就懂）

原创

已于 2022-12-21 10:33:40 修改 · 5.3k 阅读

标签

#javascript #前端 #html #vue.js

收录于

于 2022-12-21 09:40:46 首次发布

本文介绍了如何在Vue应用中使用BMapGL库初始化地图并绘制热力图，步骤包括引入API、设置地图视图、创建热力图层和数据处理。重点展示了如何通过JavaScript实现热点标记和事件监听。

1.先初始化地图，让地图出来

a.在静态文件public里的index.html中引入

   <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script> 
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
    <script src="static/common.js"></script>
    <script src="/https://unpkg.com/mapvgl@1.0.0-beta.168/dist/mapvgl.min.js"></script>

b.在随便的.vue文件中创建一个div,放入id

<div id="map"></div>

c.初始化地图，让地图出来

this.map = new BMapGL.Map('map') // 创建地图实例
this.map.clearOverlays()
this.map.centerAndZoom(new window.BMapGL.Point(117.66080346230646, 38.957995566132666), 11)
window.BMapGL.Point(117.66080346230646, 38.957995566132666), 12)
this.map.setMinZoom(10.5)

d.写个方法执行绘制热力图