百度地图——点标记及点击弹窗显示

功能点

• 自定义图片标记点，多个样式不同的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()
            }
          }
        }
      })