vue中百度地图组件,点聚合
vue项目中,安装百度地图组件后(在我的上一篇文章已介绍vue安装百度地图依赖包,以及使用(模块化引入百度地图)),但如何对点位进行聚合呢?首先,我们可以看百度地图组件官网:注意红框框选(后面讲到官网这个bugger)根据官网介绍,我们可以进行全局和局部注册,进而引入点聚合。局部注册:我们就可以按照官网介绍,首先引入包,然后进行注册:import {BmlMarkerClusterer}...
·
vue项目中,安装百度地图组件后(在我的上一篇文章已介绍vue安装百度地图依赖包,以及使用(模块化引入百度地图)),但如何对点位进行聚合呢?
首先,我们可以看百度地图组件官网:注意红框框选(后面讲到官网这个bugger)
根据官网介绍,我们可以进行全局和局部注册,进而引入点聚合。
局部注册:我们就可以按照官网介绍,首先引入包,然后进行注册:
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
components: {
BmlMarkerClusterer
}
}
全局注册:我们就可以按照官网介绍,在vue项目目录src文件下,配置main.js:
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
import {BmlMarkerClusterer} from 'vue-baidu-map'
Vue.component('bml-marker-clusterer', BmlMarkerClusterer)
重点来了,注意了,百度组件官网注册的聚合标签为bml-marker-cluster,而在聚合所使用的标签为bml-marker-clusterer(和上述我所框选的红框对比)
所以我们自己在进行引入聚合时,一定要将注册的标签保持一致(反之,找bugger很痛苦),直接上代码(我这里使用的为全局注册):
<template>
<baidu-map class="map"
:center="{lng:121.477937,lat:31.23507}"
:zoom='13'
:scroll-wheel-zoom='true'
>
<bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
<bm-marker @click="infoWindowOpen" :position="{lng:121.477937,lat:31.23507}" :dragging="true" animation='BMAP_ANIMATION_BOUNCE'>
<bm-label content='上海市市民之家' :labelStyle="{color:'red',fontSize:'12px'}" :offset="{width:-35,height:30}" />
</bm-marker>
<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen='true'></bm-overview-map>
<bml-marker-clusterer :averageCenter="true">
<bm-marker @click="infoWindowOpen2" v-for="(marker,index) in markers" :key="index" :position="{lng:marker.longitude,lat:marker.latitude}">
</bm-marker>
</bml-marker-clusterer>
</baidu-map>
</template>
<script>
export default {
name:'map',
data(){
return {
markers:[],
show: true
}
},
created(){
},
components:{
// BmlMarkerClusterer
},
mounted(){
this.request();
},
methods:{
// 加载页面即进入摄像机列表请求
request() {
const me = this;
me.markers = [];
this.axios.post("我自己调试的接口") //获取点位的接口
.then(function (response) {
if (response.data.code == 0) {
const msg = response.data.msg;
me.markers = msg;
}
})
.catch(function (error) {
console.log(error);
})
}
}
}
得到的结果为:
为了进一步展示每个marker点的详细信息,通过官网介绍,我们可以使用bm-info-window标签进行添加(这里我就不详细介绍了,自己去官网查询),但是当我们对点位进行聚合后,却不能显示对应点位的信息,上代码对比:
<template>
<baidu-map class="map"
:center="{lng:121.477937,lat:31.23507}"
:zoom='13'
:scroll-wheel-zoom='true'
>
<bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
<bm-marker @click="infoWindowOpen" :position="{lng:121.477937,lat:31.23507}" :dragging="true" animation='BMAP_ANIMATION_BOUNCE'>
<bm-info-window :show="show" @close="infoWindowClose" @click="infoWindowOpen">上海市市民之家</bm-info-window>
<!-- <bm-label content='上海市市民之家' :labelStyle="{color:'red',fontSize:'12px'}" :offset="{width:-35,height:30}" /> -->
</bm-marker>
<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen='true'></bm-overview-map>
<bml-marker-clusterer :averageCenter="true">
<bm-marker @click="infoWindowOpen2" v-for="(marker,index) in markers" :key="index" :position="{lng:marker.longitude,lat:marker.latitude}">
<bm-info-window :show="show" @close="infoWindowClose" @click="infoWindowOpen">上海市市民之家</bm-info-window>
</bm-marker>
</bml-marker-clusterer>
</baidu-map>
</template>
<script>
export default {
name:'map',
data(){
return {
markers:[],
show: true
}
},
mounted(){
this.request();
},
methods:{
infoWindowClose () {
this.show = false
},
infoWindowOpen () {
this.show = true
},
// 加载页面即进入摄像机列表请求
request() {
const me = this;
me.markers = [];
this.axios.post("我自己调试的接口") //获取点位的接口
.then(function (response) {
if (response.data.code == 0) {
const msg = response.data.msg;
me.markers = msg;
}
})
.catch(function (error) {
console.log(error);
})
}
}
}
对应的结果如下:
上述问题待解决。
更多推荐
已为社区贡献14条内容
所有评论(0)