最近开始使用百度地图，需要在标记上添加一些闪烁的动画来做一些高亮或者明显提示给客户，因此基于css3来处理动画效果，用maker来处理标记，以下是简单记录。
1、扩展css3
测试css3代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3测试</title>
<style type="text/css">
html{
height: 100%;
width: 100%;
overflow: hidden;
}
.css_animation{
height:50px;
width:50px;
border-radius: 25px;
background: rgba(250, 0, 0, 0.9);
transform: scale(0);
animation: myfirst 3s;
animation-iteration-count: infinite;
}
@keyframes myfirst{
to{
transform: scale(2);
background: rgba(0, 0, 0, 0);
}
}
</style>
</head>
<body>
<div id="c_test" class="css_animation"> </div>
</body>
</html>
实际效果：
2、扩展js，提供渲染css3和maker的方法，ComplexCustomOverlay.js：
function ComplexCustomOverlay(point , marker){
this._point = point;
this._marker = marker;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
var arrow = this._arrow = document.createElement("div");
arrow.style.position = "absolute";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
arrow.className="css_animation";
if(this._marker ){
map.addOverlay(this._marker );
}
map.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - 25 + "px";
this._div.style.top = pixel.y - 25 + "px";
}
ComplexCustomOverlay.prototype.setPosition = function(point) {
this._point = point ;
this.draw();
if(this._marker)
this._marker.setPosition(this._point);
}
ComplexCustomOverlay.prototype.getPosition = function() {
return this._point ;
}
3、调用测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3_MARKER测试</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=39b5eb8bb91adccfa6487135d960a1e8"></script>
<script type="text/javascript" src="ComplexCustomOverlay.js"></script>
<link rel="stylesheet" type="text/css" href="ComplexCustomOverlay.css">
<style type="text/css">
html {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
border: 0px;
}
.map {
width: 100%;
height: 100%;
background: #d5e6f5;
position: absolute;
float: left;
}
</style>
</head>
<body>
<div id="map" class="map"> </div>
<script type="text/javascript">
var map;
window.onload = function() {
map = new BMap.Map('map'); // 创建Map实例
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var point = new BMap.Point(120, 30);//, 11
map.centerAndZoom(point, 9);
//三个marker
var m1 = addMarker(120, 30);
map.addOverlay(m1);
};
function addMarker(_lon, _lat) {
var point = new BMap.Point(_lon, _lat);
var size = new BMap.Size(48, 48);
var marker = new BMap.Marker(point); // 创建标注
var plex = new ComplexCustomOverlay(point, marker); // 创建标注
return plex;
}
</script>
</body>
</html>
实际效果：
4、添加复杂效果，提供和其他maker的连线并动态移动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS_MARKER2测试</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=39b5eb8bb91adccfa6487135d960a1e8"></script>
<script type="text/javascript" src="ComplexCustomOverlay.js"></script>
<link rel="stylesheet" type="text/css" href="ComplexCustomOverlay.css">
<style type="text/css">
html {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
border: 0px;
}
.map {
width: 100%;
height: 100%;
background: #d5e6f5;
position: absolute;
float: left;
}
</style>
</head>
<body>
<div id="map" class="map"> </div>
<script type="text/javascript">
var map;
var index = 0;
var add = 0.01;
window.onload = function() {
map = new BMap.Map('map'); // 创建Map实例
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var point = new BMap.Point(120, 30);//, 11
map.centerAndZoom(point, 9);
//三个marker
var m1 = addMarker(120, 30);
var m2 = addMarker(121, 30);
var m3 = addMarker(120, 31);
//无人机
var m4 = addMarker(121, 31);
map.addOverlay(m1);
map.addOverlay(m2);
map.addOverlay(m3);
map.addOverlay(m4);
var l1 = new BMap.Polyline([ new BMap.Point(120, 30),
new BMap.Point(121, 31) ], {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.8
}); //创建折线
var l2 = new BMap.Polyline([ new BMap.Point(121, 30),
new BMap.Point(121, 31) ], {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.8
}); //创建折线
var l3 = new BMap.Polyline([ new BMap.Point(120, 31),
new BMap.Point(121, 31) ], {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.8
}); //创建折线
map.addOverlay(l1); //增加折线
map.addOverlay(l2); //增加折线
map.addOverlay(l3); //增加折线
setInterval(function() {
index = index + 1;
var old_p = m4.getPosition();
var lon = old_p.lng - add;
var lat = old_p.lat - add;
if (Math.abs(index) > 100) {
add = add * -1;
index = 0;
}
//修改线和位置
var p = new BMap.Point(lon, lat);
l1.setPositionAt(1, p);
l2.setPositionAt(1, p);
l3.setPositionAt(1, p);
m4.setPosition(p);
}, 100);
};
function addMarker(_lon, _lat) {
var point = new BMap.Point(_lon, _lat);
var size = new BMap.Size(48, 48);
var marker = new BMap.Marker(point); // 创建标注
var plex = new ComplexCustomOverlay(point, marker); // 创建标注
return plex;
}
</script>
</body>
</html>
实际效果：
相关推荐
查看进程信息，方便排查问题
IDA Pro分析STM32F1xx插件
项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助 【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行，功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用
小型的微电网仿真模型，简单模拟了光伏，家庭负载变化的使用情况
MATLAB代码实现：分布式电源接入对配电网运行影响深度分析与评估,MATLAB代码分析：分布式电源接入对配电网运行影响评估,MATLAB代码：分布式电源接入对配电网影响分析 关键词：分布式电源 配电网 评估 参考文档：《自写文档，联系我看》参考选址定容模型部分； 仿真平台：MATLAB 主要内容：代码主要做的是分布式电源接入场景下对配电网运行影响的分析，其中，可以自己设置分布式电源接入配电网的位置，接入配电网的有功功率以及无功功率的大小，通过牛顿拉夫逊法求解分布式电源接入后的电网潮流，从而评价分布式电源接入前后的电压、线路潮流等参数是否发生变化，评估配电网的运行方式。 代码非常精品，是研究含分布式电源接入的电网潮流计算的必备程序 ,分布式电源; 配电网; 接入影响分析; 潮流计算; 牛顿拉夫逊法; 电压评估; 必备程序。,基于MATLAB的分布式电源对配电网影响评估系统
项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助 【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行，功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用
重庆市农村信用合作社 农商行数字银行系统建设方案.ppt
光伏并网逆变器设计方案与高效实现：结合matlab电路仿真、DSP代码及环流抑制策略,光伏并网逆变器设计方案：结合matlab电路文件与DSP程序代码，实现高效并联环流抑制策略,光伏并网逆变器设计方案，附有相关的matlab电路文件,以及DSP的程序代码，方案、仿真文件、代码三者结合使用效果好，事半功倍。 备注：赠送逆变器并联环流matlab文件，基于矢量控制的环流抑制策略和下垂控制的环流抑制 ,光伏并网逆变器设计方案; MATLAB电路文件; DSP程序代码; 方案、仿真文件、代码结合使用; 并联环流抑制策略; 下垂控制的环流抑制,光伏并网逆变器优化设计：方案、仿真与DSP程序代码三合一，并赠送并联环流抑制策略Matlab文件
内容概要：本文介绍了通过 Matlab 实现鲸鱼优化算法(WOA)与门控循环单元(GRU)结合的多输入分类预测模型。文章首先概述了时间序列预测的传统方法局限性以及引入 WOA 的优势。然后，重点阐述了项目背景、目标、挑战及其独特之处。通过详细介绍数据预处理、模型构建、训练和评估步骤，最终展示了模型的效果预测图及应用实例。特别强调利用 WOA 改善 GRU 的参数设置，提高了多输入时间序列预测的准确性与鲁棒性。 适合人群：对时间序列分析有兴趣的研究者，从事金融、能源、制造业等行业数据分析的专业人士，具备一定的机器学习基础知识和技术经验。 使用场景及目标：本项目旨在开发一个高度准确和稳定的多变量时间序列预测工具，能够用于金融市场预测、能源需求规划、生产调度优化等领域，为企业和个人提供科学决策依据。 其他说明：项目提供的源代码和详细的开发指南有助于学习者快速掌握相关技能，并可根据实际需求调整模型参数以适应不同的业务情境。
项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助 【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行，功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用
内容概要：本文介绍了Python中基于双向长短期记忆网络（BiLSTM）与AdaBoost相结合的多输入分类预测模型的设计与实现。BiLSTM擅长捕捉时间序列的双向依赖关系，而AdaBoost则通过集成弱学习器来提高分类精度和稳定性。文章详述了该项目的背景、目标、挑战、特色和应用场景，并提供了详细的模型构建流程、超参数优化以及视觉展示的方法和技术要点。此外，还附有完整的效果预测图表程序和具体示例代码，使读者可以快速上手构建属于自己的高效稳定的时间序列预测系统。 适合人群：对深度学习特别是时序数据分析感兴趣的开发者或者科研工作者；正在探索高级机器学习技术和寻求解决方案的企业分析师。 使用场景及目标：适用于希望提升时间序列或多输入数据类别判定准确度的业务情境，比如金融市场的走势预估、医学图像分析中的病变区域判读或是物联网环境监测下设备状态预警等任务。目的是为了创建更加智能且可靠的预测工具，在实际应用中带来更精准可靠的结果。 其他说明：文中提供的所有Python代码片段和方法都可以直接运用于实践中，并可根据特定的问题进行相应调整和扩展，进一步改进现有系统的效能并拓展新的功能特性。
1、文件内容：maven-script-interpreter-javadoc-1.0-7.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/maven-script-interpreter-javadoc-1.0-7.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊
在云服务器上搭建MQTT服务器（超详细，一步到位）
复现改进的L-SHADE差分进化算法求解最优化问题详解：附MATLAB源码与测试函数集,复现改进的L-SHADE差分进化算法求解最优化问题详解：MATLAB源码与测试集全攻略,复现改进的L-SHADE差分进化算法求最优化问题 对配套文献所提出的改进的L-SHADE差分进化算法求解最优化问题的的复现，提供完整MATLAB源代码和测试函数集，到手可运行，运行效果如图2所示。 代码所用测试函数集与文献相同：对CEC2014最优化测试函数集中的全部30个函数进行了测试验证，运行结果与文献一致。 ,复现; 改进的L-SHADE差分进化算法; 最优化问题求解; MATLAB源代码; 测试函数集; CEC2014最优化测试函数集,复现改进L-SHADE算法：最优化问题的MATLAB求解与验证
天津大学：深度解读DeepSeek原理与效应.pdf 1.大语言模型发展路线图 2.DeepSeek V2-V3/R1技术原理 3DeepSeek效应 4.未来展望
光伏混合储能微电网能量管理系统模型：基于MPPT控制的光伏发电与一阶低通滤波算法的混合储能系统优化管理,光伏混合储能微电网能量优化管理与稳定运行系统,光伏-混合储能微电网能量管理系统模型 系统主要由光伏发电模块、mppt控制模块、混合储能系统模块、直流负载模块、soc限值管理控制模块、hess能量管理控制模块。 光伏发电系统采用mppt最大跟踪控制，实现光伏功率的稳定输出；混合储能系统由蓄电池和超级电容组合构成，并采用一阶低通滤波算法实现两种储能介质间的功率分配，其中蓄电池响应目标功率中的低频部分，超级电容响应目标功率中的高频部分，最终实现对目标功率的跟踪响应；SOC限值管理控制，根据储能介质的不同特性，优化混合储能功率分配，进一步优化蓄电池充放电过程，再根据超级电容容量特点，设计其荷电状态区分管理策略，避免过充过放，维持系统稳定运行；最后，综合混合储能和系统功率平衡，针对光伏储能微电网的不同工况进行仿真实验，验证控制策略的有效性。 本模型完整无错，附带对应复现文献paper，容易理解，可塑性高 ,光伏; 混合储能系统; 能量管理; MPPT控制; 直流负载;
Matlab算法下的A星路径规划改进版：提升搜索效率，优化拐角并路径平滑处理,Matlab下的A星算法改进：提升搜索效率、冗余拐角优化及路径平滑处理,Matlab算法代码 A星算法 路径规划A＊ Astar算法仿真 传统A＊+改进后的A*算法 Matlab代码 改进： ①提升搜索效率（引入权重系数） ②冗余拐角优化（可显示拐角优化次数） ③路径平滑处理（引入梯度下降算法配合S-G滤波器） ,Matlab算法代码; A星算法; 路径规划A*; Astar算法仿真; 传统A*; 改进A*算法; 提升搜索效率; 冗余拐角优化; 路径平滑处理; 权重系数; S-G滤波器。,Matlab中的A*算法：传统与改进的路径规划仿真研究
项目开发所用的主要提示词模板
项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助 【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行；功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用
电力系统暂态稳定性仿真分析：Matlab编程与Simulink模型下的各类故障影响研究,电力系统暂态稳定性仿真分析：Matlab编程与Simulink模型下的各类故障影响研究,电力系统暂态稳定性Matlab编程 Simulink仿真 单机无穷大系统发生各类（三相短路，单相接地，两相接地，两相相间短路）等短路故障，各类（单相断线，两相断线，三相断线）等断线故障，暂态稳定仿真分析 Simulink搭建电力系统暂态仿真模型 通过仿真，观察串联电抗器，并联补偿器，自动重合闸，以及故障切除快慢对暂态稳定性的影响 ,电力系统暂态稳定性; Matlab编程; Simulink仿真; 短路故障; 断线故障; 暂态稳定仿真分析; 仿真模型搭建; 电抗器影响; 补偿器影响; 自动重合闸; 故障切除时间。,Matlab编程与Simulink仿真在电力系统暂态稳定性分析中的应用