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

2023-08-18 02:07| 来源: 网络整理| 查看: 265

百度地图添加自定义图标标注以及自定义动画效果 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，就用多图来展示了。在这里插入图片描述

【本文地址】

公司简介

联系我们