先上图:
自定义覆盖物类(第一个例子):气泡覆盖物
css实现气泡:
// 气泡
.tag-bule{
width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
border-radius: 50%;
border: 5px solid #e8f0f5;
position: relative;
background: #56c5ff;
cursor: pointer;
}
.tag-bule:before,.tag-bule:after{
content:"";
display:block;
border-width:5px;
position:absolute;
bottom:-14px;
left: 4px;
border-style:solid dashed dashed;
border-color:#e8f0f5 transparent transparent;
font-size:0;
line-height:0;
}
.tag-bule:after{
bottom:-7px;
border-color:#56c5ff transparent transparent;
}
grad.overlay.ts
// 继承API的BMap.Overlay
declare let BMap;
export function GradOverlar(center, length, className) {
this._center = center;
this._length = length;
this._className = className;
}
GradOverlar.prototype = new BMap.Overlay();
// 实现初始化方法
GradOverlar.prototype.initialize = function (map) {
const that = this;
// 保存map对象实例
this._map = map;
// 创建div元素,作为自定义覆盖物的容器
const div = document.createElement('div');
div.style.zIndex = '10000';
div.style.position = 'absolute';
// 可以根据参数设置元素外观
div.style.width = this._length + 'px';
div.style.height = this._length + 'px';
// div.className = this._className;
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(div);
// 保存div实例
this._div = div;
// console.log(this._className);
// 需要将div元素作为方法的返回值,当调用该覆盖物的show、
// hide方法,或者对覆盖物进行移除时,API都将操作此元素。
const div1 = this._span = document.createElement('div');
div1.className = this._className;
// div1.className = 'tag-grad';
div.appendChild(div1);
// span.appendChild(document.createTextNode(this._className));
const arrow = this._arrow = document.createElement('div');
div.onmouseover = function () {
this.style.backgroundColor = that._mouseoverColor;
this.style.zIndex = '1000';
};
div.onmouseout = function () {
this.style.backgroundColor = that._color;
this.style.zIndex = '999';
};
return div;
};
// 实现绘制方法
GradOverlar.prototype.draw = function () {
// 根据地理坐标转换为像素坐标,并设置给容器
const position = this._map.pointToOverlayPixel(this._center);
this._div.style.left = position.x - this._length / 2 + 'px';
this._div.style.top = position.y - this._length / 2 + 'px';
};
// 实现显示方法
GradOverlar.prototype.show = function () {
if (this._div) {
this._div.style.display = '';
}
};
// 实现隐藏方法
GradOverlar.prototype.hide = function () {
if (this._div) {
this._div.style.display = 'none';
}
};
// 添加自定义方法
GradOverlar.prototype.toggle = function () {
if (this._div) {
if (this._div.style.display === '') {
this.hide();
} else {
this.show();
}
}
};
导入:
import { GradOverlar } from '../../service/grad.overlay';
调用:
// 添加自定义覆盖物
let mySquare;
if (item.is_exception && item.is_exception === 1) { // 异常
mySquare = new GradOverlar(pt, 50, 'tag-red');
// console.log('异常');
} else if (item.is_online === 0) { // 掉线
mySquare = new GradOverlar(pt, 50, 'tag-grad');
// console.log('掉线');
} else { // 正常
mySquare = new GradOverlar(pt, 50, 'tag-bule');
// console.log('正常');
}
// console.log(item.is_online);
that.map.addOverlay(mySquare);
参考官方文档:
http://lbsyun.baidu.com/index.php?title=open/library
http://api.map.baidu.com/library/TextIconOverlay/1.2/docs/help.html