百度地图 【vue-baidu-map-3x】-支持vue3/vue2 + BmlMarkerClusterer 聚合点

前提： BMap BMapGL vue-baidu-map-v3 区别

百度原生地图：BMap 和 BMapGL 是百度地图（Baidu Map）提供的两种不同类型的地图API。 它们主要用于在网页中嵌入和展示地图。这两种API各有特点，适用于不同的场景和需求。此外，提到 vue-baidu-map-v3 是基于 Baidu Map API 的一个封装，用于 Vue.js 框架中的地图开发。下面分别介绍它们之间的区别和各自的特点：

1. BMap 和 BMapGL，是百度原生地图

BMap

• 类型：主要用于普通的地图显示，包括基本的地图功能如标记、路线规划等。

• 特点：适用于需要展示常规地图功能的场景，比如普通的地图浏览、地点查找等。

• 使用场景：适合不需要高精度地图显示的普通Web应用。

BMapGL

• 类型：主要用于矢量地图显示，提供更丰富的地图操作接口和更高的自定义能力。

• 特点：相比于BMap，BMapGL提供了更多的矢量图层支持，适合需要精细控制地图样式、进行复杂交互操作的场景，如地图编辑、GIS应用等。

• 使用场景：适合需要高精度地图显示、复杂交互的Web应用，如地图编辑工具、GIS系统等。

2. vue-baidu-map-v3，封装百度地图

vue-baidu-map-v3 是基于 Vue.js 的一个封装库，它提供了更简便的方式在 Vue 项目中使用百度地图API（包括 BMap 和 BMapGL）。这个库封装了百度地图的API，使得在Vue组件中嵌入和使用百度地图变得更加简单和直观。

特点：

• 集成方便：通过简单的配置和组件调用，可以在Vue项目中快速集成百度地图。

• Vue风格：利用Vue的响应式数据绑定和组件化开发的优势，使得地图的使用更加符合Vue的开发习惯。

• API友好：封装了百度地图的API，同时保留了百度地图API的大部分功能，使得开发者可以灵活使用百度地图的各种功能。

总结

选择使用 BMap、BMapGL 还是 vue-baidu-map-v3 取决于你的具体需求：

• 如果你只是需要展示一个基本的地图，并且不特别关心矢量图层或者高级功能，可以选择 BMap。

• 如果你需要更精细的地图控制或者矢量图层支持，应该选择 BMapGL。

• 如果你在使用Vue.js并且希望更方便地集成百度地图，那么 vue-baidu-map-v3 是个不错的选择。 

vue-baidu-map-3x（支持vue3/vue2版本和webGl api）

步骤1：安装

 VUE3安装vue-baidu-map-3x：

 npm install vue-baidu-map-3x --save   

步骤2：引入 & 注册 

// 全局注册：在main.js中

import BaiduMap from 'vue-baidu-map-3x'

app.use(BaiduMap, {

  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */

    ak: 'oukWFWRKCGktlhX25uFBpEt0nV4XXXXX', ////     //个人手机号私人使用-July_zhengfj  

    v:'2.0',  // 默认使用3.0

   type: 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL) 

});

 

步骤3：使用

 

<template>
    <div class="content">
        <P>   https://map.heifahaizei.com/doc/begin/install.html    -   npm install vue-baidu-map-3x --save     </P>
        <baidu-map class="bm-view" :zoom="12" :center="{lng: 102.6976218355306, lat:25.0407935}" > 
            <bm-marker :position="{lng: 102.6976218355306, lat:25.0407935}" :dragging="true" ></bm-marker>
            <bm-marker :position="{lng: 102.6976218355306, lat:25.0490}" :dragging="true"  :mapStyle="mapStyle"></bm-marker>
    </baidu-map>

    </div>
</template> 
 

 
<script setup>     
import { ref } from 'vue';
//https://lbs.baidu.com/apiconsole/custommap
//https://lbs.baidu.com/customv2/editor/26e6ad36dabc2cefc9961cb7a870da9d/chuxing
const mapStyle = ref({
  styleJson:[]
}); 
 
//钩子函数
onBeforeMount(() => {

})
</script>
 

<style lang="less" scoped>

.content, .bm-view {
   width: 100%;
   height: 300px;
 }
/*
去除百度地图版权
去除右上角[地图、卫星、三维]控件
去除百度地图右上角平移缩放控件的市县区文字
*/
::v-deep .anchorBL,
::v-deep .anchorTR,
::v-deep .BMap_zlHolder {
  display: none;
  visibility: hidden;
}
</style>
   

运行结果截图

 步骤4：    BmlMarkerClusterer 聚合点 参考https://blog.csdn.net/wuli_youhouli/article/details/128974050

 

 

<template>
  <baidu-map class="bm-view" @ready="ready">
    <bml-marker-clusterer :averageCenter="true">
      <bm-marker  v-for="(marker,index) in markers" :key="index" :position="{lng:marker.lng,lat:marker.lat}"></bm-marker>
   </bml-marker-clusterer>
  </baidu-map>
</template>
<script>
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
  data() {
    return {
      BMap: null,
      map: null,
      markers:[],
    }
  },
  components: {
    BmlMarkerClusterer
  },
  methods:{
    ready({ BMap, map }) {
      this.BMap=BMap
      this.map=map
 
      this.point = new BMap.Point(113.27, 23.13); 
      map.centerAndZoom(this.point, 2);
      
 
      // 添加聚合点
      for (var i=0; i<100; i++) {
        var point = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21)
        this.markers.push({
          lat: point.lat,
          lng: point.lng
        })
      }
    }
  }
}
</script>
<style>
.bm-view {
  width: 300px;
  height: 300px;
}
</style>

　　

 

 

其他版本：npm install vue2-baidu-map

vue2中百度地图 【vue2-baidu-map】

 

https://map.heifahaizei.com/doc/index.html

npm install vue2-baidu-map --save 

代码

<template>
    <div   class="sub-map002"> 
   <baidu-map class="bm-view" :center="centerLagLat" :zoom="14" :scroll-wheel-zoom="true" ></baidu-map>
  </div>
  </template>
  
  <script>  
import Vue from "vue"; 
import BaiduMap from 'vue2-baidu-map'; 
Vue.use(BaiduMap, {
  ak: 'oukWFWRKCGktlhX25uFBpEt0nV4xxxxx',  //个人手机号私人使用-July_zhengfj  oukWFWRKCGktlhX25uFBpEt0nV4xxxxx
  type: 'WebGL' // ||API 默认API  ('WebGL'使用此模式 BMap=BMapGL)
});
  export default {
   name: 'sub-map002', 
   data: () => {
     return {
        centerLagLat: {lng: 119, lat:29}, 
       
     };
   }, 
   computed: {
     
   }, 
   mounted() {  
   },
   created() {},
  };
  </script>
  
  <style lang="less">
  html,body,.sub-map002 {
    margin: 0;  padding: 0;
   width: 100% ;
   height: 100%;
   position: relative;
   
  .bm-view {
   width: 100%;
   height: 100%;
   position: relative;
  }
  }
  </style>

 vue-bmap-gl:百度地图WebGL版本的地图组件封装

vue-bmap-gl@next是一套基于Vue3 和百度GL的地图组件。 该版本对原组件进行升级，主要适配Vue3，同时调整事件绑定形式，调整为使用v-on进行事件绑定。 支持全量导入、按需导入和自动导入vue2请使用0.x版本，对应分支vue2

https://www.npmjs.com/package/vue-bmap-gl     

百度地图WebGL模式（Vue3）

https://map.heifahaizei.com/doc/begin/install.html