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'
總結
以上是生活随笔為你收集整理的vuebaidumap 删除覆盖物_VUE BAIDU MAP覆盖物 - 自定义覆盖物手记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 信用卡以卡养卡犯法吗
- 下一篇： vscode生成vue模板快捷键_vs