百度地图添加⾃定义图标标注以及⾃定义动画效果脏的用英语怎么说
烤虾球
百度地图添加⾃定义图标标注以及⾃定义动画效果
上次写的是添加⾃定义图标，但是⽤的是添加⾃定义覆盖物⽅法，结果不⽀持点聚合，这次写的还是添加⾃定义图标，但是可以⽀持点聚合，同时还加上了⾃定义动画效果。
1、添加⾃定义图标标注子宫囊肿是怎么形成的
代码如下，vue⾥记得把图标扔到static⽂件夹中或者图⽚服务器上，不然请求不到。
// 调⽤该⽅法后创建标注
addMapDeviceMarker(deviceObj){
// 创建地图点
var pt =new BMap.Point(deviceObj.lat, deviceObj.lng);
// 创建⾃定义图标对象
var myIcon =new BMap.Icon('../../../static/img/patrol.png',new BMap.Size(43,55));
var marker =new BMap.Marker(pt,{icon:myIcon});// 创建标注
this.map.addOverlay(marker);
deviceObj.mapMarker = marker;庆元旦绘画
}
2、添加⾃定义动画效果
2.1、标注对象marker的构成
打印marker可以发现marker对象有以下属性
⽽其中的Yc就是标注所在的容器，黄⾊的就是Yc，⾥⾯的img就是⾃定义图标的容器，Yc外⾯还包着⼀层⽗元素⽗元素，这就是整个标注
所在的容器了。
2.2、⾃定义动画效果实现过程
⾸先给marker标注添加⼀段js代码.我采取的⽅法是给Yc⼀个class，这个class内部的两个容器有动画效果，再在Yc内部添加两个指定class的容器。本来想⽤before和after选择器的，但是没出现效果，就改成这种⽅式来实现了。
// 添加两个容器，在这两个容器上增加动画效果
let divElement = ateElement('div');
divElement.className ='before';
let divElement2 = ateElement('div');
divElement2.className ='after';
marker.Yc.innerHtml = marker.Yc.childNodes[0];
marker.Yc.appendChild(divElement);
marker.Yc.appendChild(divElement2);
marker.Yc.className ='';
marker.Yc.className ='dot';
marker.Yc.style.overflow ='';
marker.Yc.firstChild.style.position ='relative';
marker.Yc.firstChild.style.zIndex ='5';
css代码，这是⼀个由内向外逐渐扩散的动画效果。
.
dot{
display: block;幸而
width:100%;
height:100%;
position: absolute;
left:0;
分解因式right:0;
bottom:0;
top:0;
z-index:50;
}
.
dot:hover{
z-index:100;
}
/* 内环 */
.dot >.before {
content:'';
position: absolute;
width:20px;
height:20px;
left:10px;
top:40px;
border:2px solid #4dbbda;
border-radius:100%;
background-color: #4dbbda;
z-index:2;
animation: color1 1s ea-out;
animation-iteration-count: infinite;
}
/* 产⽣动画（向外扩散变⼤）的圆圈 */
.dot >.after{
content:'';
position: absolute;
width:40px;
height:40px;
top:30px;
left:-1px;
border:3px solid #4dbbda;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
z-index:1;
opacity:0;
animation: color2 1s ea-out;
animation-iteration-count: infinite;
}
// 动画效果
@keyframes color1 {
0%{
transform:scale(0.1);
opacity:0.5;
border-color: #1da5ce;
}
25%{
transform:scale(0.5);
opacity:0.5;
border-color: #0b93d6;
}
50%{
transform:scale(1);
opacity:0.5;
border-color: #13b5e5;
}
75%{
transform:scale(1);
opacity:0;
}
100%{
transform:scale(1);
opacity:0;
}
}
@keyframes color2 {
0%{
人才素质transform:scale(0.5);
opacity:0;
}
25%{
transform:scale(0.5);
opacity:0;
}
49%{
-webkit-transform:scale(0.5); opacity:0;
}
50%{
transform:scale(0.5);
opacity:0.5;
border-color: #4b9ec7;
}
75%{
transform:scale(0.8);
opacity:0.5;
灵活就业补贴border-color: #4cb5d6;
}
100%{
transform:scale(1);
opacity:0.5;
border-color: #9cddeb;
}
}
.dot >div{
z-index:3;
top:0;
left:0;
}
操作后地图上的标注元素内容如图
2.3、最终实现效果
效果是⼀个圆圈从图标底部逐渐扩散，逐渐变淡、并由实⼼变成空⼼。不会gif，就⽤多图来展⽰了。
