vuebaidumap 删除覆盖物_VUE BAIDU MAP覆盖物 - 自定义覆盖物手记

前言

覆盖物的最高级就是自定义覆盖物，而往往业务中就必须用自定义覆盖物，因为都用上了地图这么吊的组件了，覆盖物也必须华丽、高度定制。

官网

Github

自定义覆盖物手册

效果

效果核心其实是三角箭头的阴影，其他都很好说。说起三角的阴影，其实就是看你对box-shadow是否精通，原则上是上方的2条边不能出现shadow，下方的shadow要贴近大容器的shadow，混为一体。

方案一，有宽高容器背景染色，加旋转加shadow：

有宽高容器背景染色，加旋转加shadow

方案二，无宽高容器利用border染色，加旋转加shadow：

无宽高容器利用border染色，加旋转加shadow

这两个方案都差不多，主要考察你是不是对shadow调试的更好。

方案一，有宽高容器背景染色

解释一下left: 113.7px;，它的计算方法是：

250 / 2 = 125 算出中心点

√(16 * 16 * 2)是斜边的长度，大约等于22.6，一半等于11.3

125 - 11.3 = 113.7就是left: 113.7px;

.bm-overlay {

width: 250px;

height: 80px;

line-height: 1.6;

background-color: #fff;

box-shadow: 0 0 5px #ccc;

border-radius: 8px;

padding: 10px;

position: relative;

font-size: 0;

&::after {

position: absolute;

content: "";

transform: rotate(45deg);

width: 16px;

height: 16px;

font-size: 0;

position: absolute;

background-color: #fff;

box-shadow: 5px 5px 5px -5px #ccc;

bottom: -8px;

left: 113.7px;

}

.logo {

width: 60px;

height: 60px;

margin: 0 10px 0 0;

vertical-align: top;

}

.inline-block {

width: 160px;

vertical-align: top;

}

.title {

color: #333;

font-size: 14px;

font-weight: bold;

}

.contents {

color: 666;

font-size: 12px;

}

}

方案二，无宽高容器利用border染色

.bm-overlay {

width: 250px;

height: 80px;

line-height: 1.6;

background-color: #fff;

box-shadow: 0 0 5px #ccc;

border-radius: 8px;

padding: 10px;

position: relative;

font-size: 0;

&::before {

position: absolute;

content: "";

width: 0;

height: 0;

font-size: 0;

position: absolute;

transform: rotate(45deg);

border-width: 8px;

border-style: solid dashed dashed;

border-color: transparent #fff #fff transparent;

box-shadow: 1px 1px 1px #ccc;

bottom: -8px;

left: 113.7px;

}

.logo {

width: 60px;

height: 60px;

margin: 0 10px 0 0;

vertical-align: top;

}

.inline-block {

width: 160px;

vertical-align: top;

}

.title {

color: #333;

font-size: 14px;

font-weight: bold;

}

.contents {

color: 666;

font-size: 12px;

}

}

el.style.left 的偏移量

draw({ el, BMap, map }) {

const pixel = map.pointToOverlayPixel(

new BMap.Point(114.628239, 38.041396)

)

el.style.left = pixel.x + 'px'

el.style.top = pixel.y + 'px'

},

这里el.style.left和el.style.top要设偏移，默认是左上角。

先说x轴，应偏移半个大容器宽度，125。el.style.left = pixel.x - 125 + 'px'

再说y轴，应偏移整个大容器高度加上三角容器斜边一半，上面有计算过，是11.3，所以是91.3。el.style.top = pixel.y - 91.3 + 'px'