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