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，就用多图来展示了。

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

js给百度地图上的圆点加自定义动画_three.js实现建筑物纹理流动
在知乎写第一篇软文哈,略有点小慌,最近一直在做智慧城市,大多特效特效我已实现,以往看着牛逼的智慧城市感觉也就那样,第一篇文章来点干货吧,废话不多说本文主要实现建筑物纹理流动的特效. 参考特效来源于th ...
百度地图添加自定义Marker+显示覆盖层次优先级
转载请注明出处:blog.csdn.net/wll995806658 实际项目中经常会集成地图,今天就只谈谈百度地图添加自定义Marker这一部分,希望对百度地图集成有这部分需求的小伙伴能有一些帮助. ...
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索）
百度地图开发系列目录数据可视化大屏应急管理综合指挥调度系统完整案例详解(PHP-API.Echarts.百度地图) 数据可视化大屏百度地图API开发:停车场分布标注和检索静态版百度地图高级开发:m ...
【百度地图API】如何给自定义覆盖物添加事件
原文:[百度地图API]如何给自定义覆盖物添加事件摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...
解决百度地图多个标注覆盖不能响应点击的问题
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
高德地图添加自定义图标
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 1.问题 ...
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
[HTML/CSS]动画效果以及自定义动画效果
一,实现div或者文字的当鼠标浮于其上时的动画效果: 1,transition加在div中,实现动画效果的过渡效果,transition: all 3s;其中all表示所有样式都参与过渡,3s表示实现 ...
sns.distplot图例标注怎么添加_百度地图API图标、文本、图例与连线
百度地图开放平台功能强大,使用简单,为地图的自定义提供了非常方便的途径! 本文以绘制一张全国机器辐射图为例记录其基本使用方法,效果如下图: 图中包括了带图标和文本的标注,连线以及图例. 1.关于坐标 ...

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