百度地图添加自定义图标标注以及自定义动画效果
1、添加自定义图标标注2、添加自定义动画效果2.1、标注对象marker的构成2.2、自定义动画效果实现过程2.3、最终实现效果上次写的是添加自定义图标,但是用的是添加自定义覆盖物方法,结果不支持点聚合,这次写的还是添加自定义图标,但是可以支持点聚合,同时还加上了自定义动画效果。
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,就用多图来展示了。