css用伪元素制作气泡框&百度地图label气泡
2020-04-16 本文已影响0人
小雨喜欢大晴天
前几天学习了一下伪元素，今天有个页面正好用到了。
伪元素
伪元素是不存在于文档树中的元素。
伪元素本质上是创建了一个有内容的虚拟容器
一般用来制作一些图标。好处是可以简化页面的标签。
用伪元素制作一个气泡框
需求设计图：
气泡框
页面结构
<div class='pop'>
<div class='popContent'>
<span>文字内容</span>
</div>
</div>
less样式
.pop{
position: absolute;
background-color: #ffffff;
font: 12px arial, sans-serif;
z-index: 80;
left: 10px;
top: 50px;
border-radius: 7px;
box-shadow: 0px 5px 14px 1px #f1dddd; //边框阴影：左右偏移 上下偏移 模糊范围 阴影宽度 阴影颜色
.popContent{
margin: .2rem;
word-break: keep-all;
&::before { //before伪元素，&是less语法，代表嵌套结构中的父级元素
content: '';
border: solid transparent; //利用border画一个等腰三角形
border-width: 8px 5px;
border-top-color: #FFFFFF; //三角形和主框颜色一致
position: absolute; //定位到主框下部中央
left: calc(~'50% - 5px');
top: 100%;
}
}
}
效果
实际效果
百度地图Label标签自定义为气泡框
思路：百度地图文本标注Label的内容支持HTML，将气泡框的页面写入，就可以通过class设置样式了
以下代码是在百度地图API示例基础上改的，粘过去可以直接看效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
font-family:"微软雅黑";
}
.popContent{
margin: .2rem;
word-break: keep-all;
}
.popContent::before {
content: '';
border: solid transparent;
border-width: 8px 5px;
border-top-color: #FFFFFF;
position: absolute;
left: calc(50% - 5px);
top: 100%;
}
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>文本标注</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.417854,39.921988);
map.centerAndZoom(point, 15);
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(30, -30) //设置文本偏移量
}
var label = new BMap.Label("<div class='popContent'>欢迎使用百度地图，这是一个简单的文本标注哦~</div>", opts); // 创建文本标注对象
label.setStyle({ border:'none',borderRadius: '7px',boxShadow: '0px 5px 14px 1px #f1dddd',transform: 'translateX(calc(-50% + 11px))'});
map.addOverlay(label);
</script>
注意：
vue中使用，要把样式写在全局样式中（为什么写在组件样式中没有效果？）
label的样式可以通过label.setStyle来进行设置，或者通过.BMapLabel进行设置，这个类名是百度地图自动生成的，
如果一个项目中有多种label样式，可以通过setStyle分别进行设置，或者在全局样式文件中通过地图的id加上label的类名进行更精确的选择。
