vue百度地图聚合功能

267 阅读1分钟

在vue模块里面写入

      <bml-marker-clusterer :averageCenter="true" :styles="markerStyles">///////////自定义聚合图标样式:styles="markerStyles"
        <bm-marker v-for="(i,index) in kedingweizhandian" :position="{lng:i.lon,lat:i.lat}"  :icon="ic" @dblclick="shunagji(i)"     @click="fangda(i,index)" >
          <bm-info-window :show="inde===index" @close="inde=''" :width="wid">
          </bm-info-window>

        </bm-marker>
      </bml-marker-clusterer>

把自定义的聚合图标引入当前模块并且挂在vue的实例上

  import mar0 from "./img/img/0.png";
  import mar1 from "./img/img/1.png";
  import mar2 from "./img/img/2.png";
  import mar3 from "./img/img/3.png";
  import mar4 from "./img/img/4.png";
  
 markerStyles:[
          {
            url:mar0,
            size:{
              width:53,
              height:53,
            }
          },
          {
            url:mar1,
            size:{
              width:56,
              height:56,
            }
          },
          {
            url:mar2,
            size:{
              width:66,
              height:66,
            }
          },
          {
            url:mar3,
            size:{
              width:78,
              height:78,
            }
          },
          {
            url:mar4,
            size:{
              width:90,
              height:90,
            }
          },
        ]