前言

覆蓋物的最高級就是自定義覆蓋物，而往往業務中就必須用自定義覆蓋物，因為都用上了地圖這么吊的組件了，覆蓋物也必須華麗、高度定制。

官網

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'

總結

以上是生活随笔為你收集整理的vuebaidumap 删除覆盖物_VUE BAIDU MAP覆盖物 - 自定义覆盖物手记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。