前言
覆盖物的最高级就是自定义覆盖物，而往往业务中就必须用自定义覆盖物，因为都用上了地图这么吊的组件了，覆盖物也必须华丽、高度定制。
官网
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'
转播
