vue-baidu-map百度地图设置标记点及信息窗口_vue使用百度地图打开标注信息框,信息框在窗口外 自动移动视角

一.项目需求

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

二.实现后的效果

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

三.代码实现

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

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

//假设你的百度地图组件是这样
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

}

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

四.小结

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