vue-baidu-map百度地图设置标记点及信息窗口

一.项目需求

首先项目的功能需求是在指定服务区域内选择详细地址（保修地点），然后显示这个地址周围的工程师到地图上面。并且可以查看指定工程师的信息。从而达到派单的目的。

二.实现后的效果

左侧是选择地址，范围等条件。右侧是地图，显示的是当前保修地点和周围的工程师，点击地图工程师头像弹出详细信息（我这里是自定义信息窗口的样式）。

三.代码实现

因为我这里的代码涉及到项目的其他功能并且具有关联性，所以我的实际代码比较复杂。
我这里提取出实现的关键部分，拆开说明。所以…想直接拿去用的兄弟们可惜了。

百度地图的安装就不说了（默认你已经安装好了）

//假设你的百度地图组件是这样
<template>
	  <baidu-map
	          id="allmap"
	          @ready="mapReady"
	          :center="mapCenter"
	          :zoom="mapZoom"
	          :scroll-wheel-zoom="true"
	  >
	 		 //工程师标记点
			 <template v-if="engineerList.length">
	            <bm-marker
	              v-for="item of engineerList"
	              :key="item.feelec_engineer_id"
	              :position="{ lng: item.lng, lat: item.lat }"
	              :icon="{
	                url: engineer_mapicon,
	                size: { width: 50, height: 50 },
	              }"
	              @click="lookDetail(item)"
	            >
	            </bm-marker>
	           </template>
			  <!-- 工程师的信息窗口 -->
	         <bm-info-window
	            :position="infoWindow.info"
	            :show="infoWindow.show"
	            @close="infoWindowClose"
	            @open="infoWindowOpen"
	          >
	            <div class="info-window">
	            //这里面时窗口里的内容
	            ...
	            </div>
	          </bm-info-window>
       
	 </baidu-map>
</template>

<script>
import repair_mapicon from "/public/img/repair_mapicon.png";
import engineer_mapicon from "/public/img/engineer_mapicon.png";
import axios from 'axios'
export default {
  data() {
    return {
    engineer_mapicon,
	  BMap:{},
	  map:{},
	  engineerList:[],
	  infoWindow: {
        show: false,
        info: {
          lng: "",
          lat: "",
        },
      },
	  mapZoom: 12,
	  mapCenter: { lng: 0, lat: 0 },
    }
   },
  methods: {
  	 //初始化地图
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.BMap = BMap;
      this.map = map;
      //这里为了简单  默认一个报修点
      this.mapCenter.lng = 104.182841;
      this.mapCenter.lat = 30.528862;
      this.mapZoom = 15;
      //自定义报修图标 使用import或者require方式引入图片
      const deviceSize = new BMap.Size(50, 50);
      const deviceIcon = new BMap.Icon(repair_mapicon, deviceSize, {
        //会以base64的方式传参icon
        imageSize: deviceSize,
      });
       map.addOverlay(
         new this.BMap.Marker(this.mapCenter, {
           icon: deviceIcon,
         })
       );
      map.centerAndZoom(this.mapCenter, this.mapZoom);
    },
	//获取报修点附近的工程师
	//假设查找默认保修点附近的工程师
    getNearbyEngineer() {
        axios({
          method: "POST",
          url: "xxx/xxx",
          data: this.mapCenter,
        }).then((res) => {
          if (res.data.code === 1001) {
              const data = res.data.data;
              //附近工程师列表
              this.engineerList = data.engineer;
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
     //打开工程师信息窗口
    lookDetail(item) {
      this.infoWindow.info.lng = item.lng;
      this.infoWindow.info.lat = item.lat;
      this.infoWindow.show = true;
    },
    infoWindowClose() {
      this.infoWindow.show = false;
    },
    infoWindowOpen() {
      this.infoWindow.show = true;
    },
  }
}
</script>

<style lang="scss" scoped>
//自定义的信息窗口样式
/deep/ .BMap_pop {
  > div,
  > img:nth-child(10) {
    display: none;
    overflow: unset;
  }
  > div:nth-child(9) {
    display: block;
    overflow: unset;
    min-width: 320px !important;
  }
  > div:nth-child(8) {
    /*display: block;*/
  }
  .BMap_top {
    display: none;
  }
  .BMap_center {
    background: transparent;
    border: none;
    position: sticky !important;
    height: 100%;
  }
}

/deep/ .BMap_bubble_content {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 8px 0px rgba(0, 14, 38, 0.2);
  border-radius: 5px;
  padding: 20px;
  .info-window {
    width: 100%;
  }
}
</style>

}

帮助文档
快捷键目录标题文本样式列表链接代码片表格注脚注释自定义列表LaTeX 数学公式插入甘特图插入UML图插入Mermaid流程图插入Flowchart流程图插入类图
目录复制

四.小结

上面的代码可以完成基本的标记和信息窗体功能，自己有需要的可以自己调整。有不明白的或者需要效果图上其他功能的可以问我。