vue2使用百度地图（vue-baidu-map）

常想一二 / 2023-09-13 / 原文

https://dafrok.github.io/vue-baidu-map/#/

https://www.npmjs.com/package/vue-baidu-map

https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey

https://lbs.baidu.com/index.php?title=open/demos

一 准备和安装
  前期准备:申请ak 前往百度地图开发平台注册百度账号,申请密钥 【https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey】


二.安装 + main.js全局引入 + 初始化地图使用--全部代码

 Yarn add vue-baidu-map --save

import BaiduMap from 'vue-baidu-map'; 
Vue.use(BaiduMap, {
  ak: 'XXXXXXXXXXqMGc5Bqf1OK5uYBGYf7XXX',
});

  
<template>
  <div   class="sub-map002"> 
 <baidu-map class="bm-view" :center="centerLagLat" :zoom="14" :scroll-wheel-zoom="true"></baidu-map>
</div>
</template>

<script>  
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>

运行效果截


二.地图添加标记--截取部分代码

 <div   class="sub-map002">
   <baidu-map class="bm-view" :center="map.center" :zoom="map.zoom" :scroll-wheel-zoom="map.scroll-wheel-zoom" >
     <bml-marker-clusterer  :averageCenter="true">
        <bm-marker v-for="(marker,index) of marker1" :key="index + 'marker2'" :icon="{url: icon, size: {width: 128, height: 128}}" :position="{lng: marker.lng, lat: marker.lat} " >
          <bm-label :content="`区域设备总数:`+marker. count" :zIndex="9999" :labelStyle="{color: '#fff', fontSize : '16px',borderRadius:'6px',borderColor:'#0c75f5',backgroundColor:'#0c75f5',padding:'4px 7px'}" :offset="{width: 0, height: -6}"/>
        </bm-marker>
      </bml-marker-clusterer>
  </baidu-map>
</div>





import icon from "./assets/local.png";


<script>  
export default {
 name: 'sub-map002', 
 data: () => {
   return {
     icon, 
      map: {
        center: {lng: 109, lat:29},
        zoom: 13,
        dragging: true, 'scroll-wheel-zoom': true,
      },
       marker1:[  {lng: 109, lat:29, count:1229},],  
     
   };
 }, 
 computed: {
   
 }, 
 mounted() {  
 },
 created() {},
};
</script>

　　运行效果截图