vue中百度地图组件，点聚合

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);
					})
            }
       }
   }

对应的结果如下：

上述问题待解决。

百度组件官网：https://dafrok.github.io/vue-baidu-map/#/zh/index