高德地图覆盖物改为闪烁点样式

高德地图覆盖物闪烁点

生成高德地图

data() {
	return{
		map: null,
	}
}

mounted() {
	let _lng = "116.39598";
	let _lat = "42.51792";
	this.map = new AMap.Map('map', {
	    zoom: 15,
	    center: [_lng, _lat]
	});
	this.addmarker()
}

添加覆盖物

addmarker() {
	let marker = new AMap.Marker({
		position: [117.12412, 36.23412],
		content:'<div class="markerClass"></div>'//自定义覆盖物
	})
	this.map.add(marker);
	this.map.setFitView(); // 地图自适应
}

css样式

<style>
   .markerClass{
       margin-left: 100px;
       margin-top: 100px;
       width: 18px;
       height: 18px;
       /*transform: translate3d(0px, 0px, 0px);*/
       position: relative;
       outline: none;
       background-color: #dd524d;
       box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
       border-radius: 100%;
       transform-origin: 0 0;
       display: block;
       opacity: 0.7;
   }
   
   .markerClass::after {
       content: "";
       -webkit-border-radius: 100%;
       border-radius: 100%;
       height: 300%;
       width: 300%;
       position: absolute;
       margin: -100% 0 0 -100%;
       box-shadow: 0 0 6px 2px #dd524d;
       animation: pulsate 1s ease-out;
       animation-iteration-count: infinite; /*无穷反复*/
       animation-delay: 1.1s;
   }
   
   @keyframes pulsate {
       0% {
           transform: scale(0.1, 0.1);
           opacity: 0;
           filter: alpha(opacity=0);
       }
       50% {
           opacity: 1;
           filter: none;
       }
       100% {
           transform: scale(1.2, 1.2);
           opacity: 0;
           filter: alpha(opacity=0);
       }
   }
</style>

css不要使用scoped