百度地图添加自定义图标标注以及自定义动画效果

上次写的是添加自定义图标，但是用的是添加自定义覆盖物方法，结果不支持点聚合，这次写的还是添加自定义图标，但是可以支持点聚合，同时还加上了自定义动画效果。

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 = document.createElement('div');
 divElement.className = 'before';
 let divElement2 = document.createElement('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 ease-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 ease-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，就用多图来展示了。