vue结合百度地图实现热力图
作者:互联网
vue结合百度地图实现热力图
功能描述
结合百度地图实现热力图功能我们可在[Apache ECharts](https://echarts.apache.org/examples/zh/index.html#chart-type-heatmap)看到示例代码,实现效果大致如下。
插件安装
- npm 安装
$ npm install vue-baidu-map --save
- package.json引入
"vue-baidu-map": "0.21.22"
vue页面实现
- script代码
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
// 比例尺控件
import BmScale from 'vue-baidu-map/components/controls/Scale'
// 缩放控件
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
// 点聚合
import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
// 点
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
// 信息窗体
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
// 热力图
import BmlHeatmap from 'vue-baidu-map/components/extra/Heatmap'
export default {
components: {
BaiduMap,BmNavigation,BmlHeatmap
},
data() {
return {
zoom: 12,
heatMapDatas:[
/*{lng: 112.46829898217, lat: 34.681548131756, count: 32},
{lng: 112.48357017584, lat: 34.564954914466, count: 36},
{lng: 112.48806170339, lat: 34.563468584404, count: 33},
{lng: 111.65802741217, lat: 33.756948317877, count: 27}*/
// ...此处添加更多的数据集
],
heatMaxData: 5,
heatRadius: 4,
},
methods:{
handler ({BMap, map}) {
},
}
}
}
</script>
- 页面实现
<!--:scroll-wheel-zoom 通过鼠标滚轮缩放
center 地图中心点位
ak 登录百度地图开放平台申请(https://lbsyun.baidu.com/)
-->
<baidu-map class="map" center="洛阳" :zoom="zoom" @ready="handler"
:scroll-wheel-zoom=true
style="width: 100%;height: 340px;" ak="你的ak">
<bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
<bml-heatmap :data="heatMapDatas" :max="heatMaxData" :radius="heatRadius" ></bml-heatmap>
</baidu-map>
以上就是在vue页面结合百度地图实现热力图的所有代码,关于地图具体配置信息,可参考[Vue Baidu Map](https://dafrok.github.io/vue-baidu-map/#/zh/control/navigation)网站。
标签:baidu,map,vue,力图,components,import,lng,百度 来源: https://blog.csdn.net/weixin_44487537/article/details/118702510