这里是添加自定义控件
1.定义一个控件类,即function
function ZoomControl() {
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
2.通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
3.封装初始化函数
自定义控件必须实现initialize方法,并且将控件的DOM元素返回 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function (map) {
// 创建一个DOM元素
var div = document.createElement("div");
div.classList.add('mapbiaozhi')
div.innerHTML = '<div class="icons"></div><div class="text">文字内容</div>'
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 创建控件实例
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
主要是添加一个带有类名的空容器控件,后期通过css实现背景图标跟一些其他类容就行
.Bmap-component ::v-deep .mapbiaozhi {
display: flex;
width: 100px;
height: 50px;
.icons {
flex: 1;
height: 100%;
background: url('~@/assets/echarts/bz.png') no-repeat center;
background-size: 100%;
}
.text {
line-height: 50px;
flex: 1;
}
}