百度地图——点标记及点击弹窗显示_bmapgl.market 点击打开图片

功能点

• 自定义图片标记点，多个样式不同的lable

• 点击点展示弹窗，展示图片和录音播放暂停

• let img = require('./img/num-bg.png') 若使用背景图需要这样引入，然后使用变量

	list:[{
		name:'小曲组织',
		value:[112.991735, 28.26299],
		icon: require("./components/img/point-red1.png"),
		click: true // 是否点击弹窗
	}]
	
	//  地图上覆盖点/自定义图标/点击点弹窗显示信息
      this.list.forEach(item => {
      	// 1、指定坐标放置自定义图标
        var myIcon = new BMapGL.Icon(item.icon, new BMapGL.Size(this.fontSize(0.4), this.fontSize(0.4)));
        var marker = new BMapGL.Marker(new BMapGL.Point(...item.value), {
          icon: myIcon
        });
        map.addOverlay(marker); 
        // 2、图标下面添加lable文字描述
        var opts = {
          position: new BMapGL.Point(...item.value), // 指定文本标注所在的地理位置
          offset: new BMapGL.Size(this.fontSize(0), this.fontSize(0.25)) // 设置文本偏移量
        };
        // 自定义文本：创建文本标注对象
        if (item.name) {
          // 添加员工数量显示
          //let img = require('./img/num-bg.png') // 若使用背景图需要这样引入，然后使用变量
          var label = new BMapGL.Label(`<div class="flex1"><b class="${item.num && item.num != 0 ? 'show' : 'hide'}" style="background-color:red;border-radius: 10px; color: #fff; padding:2px 4px 3px; font-size: .0833rem;">${item.num}</b>${item.name}</div>`, opts);

          // 自定义文本标注样式
          label.setStyle({
            color: '#1a73e8',
            borderColor: 'transparent',
            backgroundColor: "transparent",
            fontSize: this.fontSize(0.13) + 'px',
            height: this.fontSize(0.25) + 'px',
            lineHeight: this.fontSize(0.22) + 'px',
            fontFamily: '微软雅黑',
            transform: 'translateX(-50%)'
          });
          map.addOverlay(label);
        }
        //3、 添加点击事件弹窗事件
        if (item.click) {
          // 创建图文信息窗口
          var opts = {
            width: 450,     // 信息窗口宽度
            height: 'auto',     // 信息窗口高度
          }
          var sContent = `<div class="pb-20">
            <div class="flex_l white" style="margin-top:-10px">
              <h3 class="bold">${item.serviceObjectName || ''}</h3>
              <div style="display:${item.serviceObjectType == 0 ? 'block' : 'none'};color:#fff;background:#67c23a;padding:4px 12px;border-radius:6px;margin-left:20px">保障</div>
              <div style="display:${item.serviceObjectType == 1 ? 'block' : 'none'};color:#fff;background:#409eff;padding:4px 12px;border-radius:6px;margin-left:20px">社会</div>
            </div>
            <div style="margin-bottom:5px">服务组织：${item.providerName || ''}</div>
            <div style="display:flex;width: 100%;margin-bottom:5px">
              <div style="flex:1">服务内容：${item.requireDescripe || ''}</div>
              <div style="flex:1;display:${item.staffName ? 'block' : 'none'}">服务员工：${item.staffName || ''}</div>
            </div>
            <div style="display:flex;width: 100%;margin-bottom:5px">
              <div style="flex:1;display:${item.signTime ? 'block' : 'none'}">签到时间：${item.signTime || ''}</div>
              <div style="flex:1;display:${item.endTime ? 'block' : 'none'}">签退时间：${item.endTime || ''}</div>
            </div>
            <div style="margin-bottom:5px">服务地址：${item.address || ''}</div>
            <div style="display:flex;width: 100%;margin-bottom:5px">
              <div style="flex:1;height:100px;line-height:100px; display:${item.signPic ? 'block' : 'none'}">
                <span>签到首图：</span>
                <viewer>
                  <img style="width:100px;height:100px;vertical-align: middle;" src="${item.signPic}" alt=""/>
                </viewer>
              </div>
              <div style="flex:1;height:100px;line-height:100px; display:${item.endPic ? 'block' : 'none'}">
                <span>签退首图：</span>
                <img style="width:100px;height:100px;vertical-align: middle;" src="${item.endPic}" alt=""/>
              </div>
            </div>
           
            <div style="display:${item.callRecord ? 'block' : 'none'}">
              <div style="height:30px;line-height:30px;" class="flex_l">
                <span>通话录音：</span>
                <audio
                  id='audio'
                  src='${item.callRecord}'
                  preload='metadata'>
                </audio>
                <i id="icon1" class="el-icon-video-play pointer size-20" οnclick="play(1)"></i>
                <i id="icon2" style="display:none" class="el-icon-video-pause pointer size-20" οnclick="play(2)"></i>
              </div>
            </div>
          </div>`;
          var infoWindow = new BMapGL.InfoWindow(sContent, opts);
          // marker添加点击事件
          marker.addEventListener('click', function () {
            this.openInfoWindow(infoWindow); // 弹窗弹出
            // 监听录音播放完毕
            _this.audio = document.querySelector('#audio');
            _this.audio.addEventListener('ended', e => {
              document.querySelector('#icon2').style.display = 'none'
              document.querySelector('#icon1').style.display = 'block'
            });
            // 图片加载完毕重绘infoWindow
            // document.getElementById('imgDemo').onload = function () {
            //   infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
            // };
          });

          // 展示录音控件方法，我们采用的自定义录音样式
          // <div style="height:30px;line-height:30px;margin-top:10px;display:${item.callRecord ? 'block' : 'none'}">
          //     <span>通话录音：</span>
          //     <div style="display:inline-block;vertical-align: middle;">
          //       <audio
          //         controls
          //         src="${item.callRecord}">
          //             <a href="${item.callRecord}">
          //                 Download audio
          //             </a>
          //       </audio>
          //     </div>
          //   </div>
          // 点击播放暂停录音
          window.play = (e) => {
            if (e == 1) {
              document.querySelector('#icon1').style.display = 'none'
              document.querySelector('#icon2').style.display = 'block'
              this.audio.play()
            } else {
              document.querySelector('#icon2').style.display = 'none'
              document.querySelector('#icon1').style.display = 'block'
              this.audio.pause()
            }
          }
        }
      })
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