前言

好久没有提笔，这几天又遇到困难了,昨天vue的百度地图插件差点没把我弄死,现在问题得以解决,记录一下
另外提及一下,在写这个帖子时我才接触vue一周,本帖仅记录学习过程与分享结果,本人水平垃圾,不喜勿喷

安装百度地图

安装百度地图vue包

npm install vue-baidu-map

导入百度地图包

导入百度地图包

我这里使用的局部导入将百度地图组件再一次进行了封装
新建一个vue组件,

<!-- t在emplate中导入百度地图插件,百度地图点标记以及信息窗口-->
<div style="height: 100%">
    <baidu-map
        :center="center"
        :zoom="zoom"
        @ready="handler"
        style="height:100%"
        :scroll-wheel-zoom='true'
        :="ak"
    >
      <div v-for="obj in Informationwindowdata">
        <bm-marker :position="{lng: obj.lng,lat: obj.lat}" @click="openinformation(this,obj)">
          <bm-info-window :show="obj.infoWindowShow" class="bminfowindow" @close="closeinformation(this,obj)">
            <p>所在位置:{{ obj.position }}</p>
          </bm-info-window>
        </bm-marker>
      </div>

    </baidu-map>
  </div>

做一下百度地图参数解释
1.baidu-map 百度组件引用参数解释
center 地图初始化时中心点,类型 Object
zoom 地图缩放级别 类型 Number
ready 地图初始化时将传出百度地图对象,放置函数用于接收该对象
scroll-wheel-zoom 鼠标滚轮缩放使能 类型Boolean
ak 你在百度申请的应用AK 类型 String
更多参数请去Map.vue中props查看对应参数
2.bm-marker 百度地图marker组件参数解释
position marker点在地图标记位置 类型 Object
3.bm-info-window 百度地图信息窗口参数解释
show 信息窗口显示,隐藏使能,类型 Boolean
bm-info-window组件内可以随意填写html代码

//在script中导入百度地图包
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmView from 'vue-baidu-map/components/map/MapView.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
import BmLabel from 'vue-baidu-map/components/overlays/Label.vue'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'
export default {
	components: {
	    BaiduMap,
	    BmView,
	    BmMarker,
	    BmLocalSearch,
	    BmLabel,
	    BmInfoWindow
	  }
}

百度地图组件封装准备

将部分参数修为外部传入,同时做好数据格式限定于初始数据的限制

props:{
	//信息窗口数据导入
	 Informationwindowdata: {
      type: Array,
      default() {
        return []
      }
    },
    //百度地图AK
    ak: {
      type: String,
      default() {
        return 'your's ak string''
      }
    },
    center:{
    	type: Object,
        default() {
        return {}
      }
    },
    zoom:{
    	type: Number,
    	 default() {
        return 13
      }
    }
}

百度地图组件函数封装

封装组件内部函数

methods: {
	init() {
      //初始化地图信息函数
      },
    handler({BMap, map}) {
    //存储百度地图对象
      this.map = map;
      this.BMap = BMap
    },
    openinformation(e, obj) {
        //百度地图信息窗口打开
      obj.infoWindowShow = true;
    },
    closeinformation(e, obj) {
      //百度地图信息窗口关闭
      obj.infoWindowShow = false;
    },
}

百度地图页面加载完成后执行函数

mounted() {
    this.init()
  },

百度地图信息窗口样式自定义

其实自定义样式我也说不上,就是感觉百度的纯白色有点丑,所以自己改了一些东西

.bminfowindow {
  //color: rgb(0, 220, 255);
  font-size: 1vw;
  width: 15vw;
  //background-color: rgb(3, 8, 41);

  p {
    margin: 0;
  }
}
/deep/ .BMap_pop * {
  background: rgba(255, 255, 255, 0) !important;
}

/deep/ .BMap_pop * {
  //
  background: rgba(255, 255, 255, 0.5) !important;
  color: #0000ff;

  * {
    background: rgba(76, 175, 80, 0) !important;
  }
}
//设置百度地图pop消息框样式
///deep/ .BMap_pop .BMap_center {
//  background-color: rgb(3, 8, 41);
//  color: rgb(0, 220, 255);
//}
//
///deep/ .BMap_pop .BMap_bottom {
//  background-color: rgb(3, 8, 41);
//  color: rgb(0, 220, 255);
//}
//
///deep/ .BMap_pop div:not(:nth-child(8)) {
//  background-color: rgb(3, 8, 41);
//  color: rgb(0, 220, 255);
//
//  div {
//    background-color: rgb(3, 8, 41) !important;
//    color: rgb(0, 220, 255) !important;
//  }
//}
//
//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了
/deep/ .BMap_pop div:nth-child(8) {
  background-color: rgb(255, 255, 255, 0) !important;
  color: rgb(0, 220, 255) !important;
  //设置透明度
  opacity: 0.6;
}

完整组件代码附上

如果有大佬有更好的方法可以@我一下哦,万分感谢

<template>
  <div style="height: 100%">
<div style="height: 100%">
    <baidu-map
        :center="center"
        :zoom="zoom"
        @ready="handler"
        style="height:100%"
        :scroll-wheel-zoom='true'
        :="ak"
    >
      <div v-for="obj in Informationwindowdata">
        <bm-marker :position="{lng: obj.lng,lat: obj.lat}" @click="openinformation(this,obj)">
          <bm-info-window :show="obj.infoWindowShow" class="bminfowindow" @close="closeinformation(this,obj)">
            <p>所在位置:{{ obj.position }}</p>
          </bm-info-window>
        </bm-marker>
      </div>

    </baidu-map>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmView from 'vue-baidu-map/components/map/MapView.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
import BmLabel from 'vue-baidu-map/components/overlays/Label.vue'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'
export default {
	components: {
	    BaiduMap,
	    BmView,
	    BmMarker,
	    BmLocalSearch,
	    BmLabel,
	    BmInfoWindow
	  },
	  props:{
	//信息窗口数据导入
	 Informationwindowdata: {
      type: Array,
      default() {
        return []
      }
    },
    //百度地图AK
    ak: {
      type: String,
      default() {
        return 'your's ak string''
      }
    },
    center:{
    	type: Object,
        default() {
        return {}
      }
    },
    zoom:{
    	type: Number,
    	 default() {
        return 13
      }
    }
	},
	methods: {
	init() {
      //初始化地图信息函数
      },
    handler({BMap, map}) {
    //存储百度地图对象
      this.map = map;
      this.BMap = BMap
    },
    openinformation(e, obj) {
        //百度地图信息窗口打开
      obj.infoWindowShow = true;
    },
    closeinformation(e, obj) {
      //百度地图信息窗口关闭
      obj.infoWindowShow = false;
    },
	},
	mounted() {
    this.init()
  },
   data() {
    return {
      map: '',
      BMap: '',
    }
  },
}
</script>
<style lang="less" scoped>
.bminfowindow {
  //color: rgb(0, 220, 255);
  font-size: 1vw;
  width: 15vw;
  //background-color: rgb(3, 8, 41);

  p {
    margin: 0;
  }
}
/deep/ .BMap_pop * {
  background: rgba(255, 255, 255, 0) !important;
}

/deep/ .BMap_pop * {
  //
  background: rgba(255, 255, 255, 0.5) !important;
  color: #0000ff;

  * {
    background: rgba(76, 175, 80, 0) !important;
  }
}
//设置百度地图pop消息框样式
///deep/ .BMap_pop .BMap_center {
//  background-color: rgb(3, 8, 41);
//  color: rgb(0, 220, 255);
//}
//
///deep/ .BMap_pop .BMap_bottom {
//  background-color: rgb(3, 8, 41);
//  color: rgb(0, 220, 255);
//}
//
///deep/ .BMap_pop div:not(:nth-child(8)) {
//  background-color: rgb(3, 8, 41);
//  color: rgb(0, 220, 255);
//
//  div {
//    background-color: rgb(3, 8, 41) !important;
//    color: rgb(0, 220, 255) !important;
//  }
//}
//
//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了
/deep/ .BMap_pop div:nth-child(8) {
  background-color: rgb(255, 255, 255, 0) !important;
  color: rgb(0, 220, 255) !important;
  //设置透明度
  opacity: 0.6;
}
</style>

效果图