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

最新推荐文章于 2025-06-15 22:02:32 发布

原创

最新推荐文章于 2025-06-15 22:02:32 发布 · 1.2w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#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: