百度地图marker CSS3动画实现

最新推荐文章于 2024-07-22 09:30:52 发布
最新推荐文章于 2024-07-22 09:30:52 发布
阅读量2.7k 收藏 12
点赞数 4
分类专栏： 百度地图 文章标签： css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38515695/article/details/105974831
版权

  1. 在地图上随便添加几个marker，使用自定义的maker图,如下图
    在这里插入图片描述

  2. 浏览器F12打开调试模式，CTRL+F搜索自定义的marker的图的名字，并找到它的上级元素.BMap_Marker。在这里插入图片描述

  3. 在上级元素里面添加自定义的元素。
    $('.BMap_Marker div').append('');如下图$('.effectPoint:even').addClass('effectPoint1');$('.effectPoint:odd').addClass('effectPoint2');

  4. 然后在自定义的元素里面添加css动画

在这里插入图片描述

5.最后，效果如图
在这里插入图片描述

浮夸夸浮夸
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3动画实现地图热点效果
sword_chiu的博客
06-02 851
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> @keyframes suo { 0% {} 70% { width: 40px; height: 40px;
百度地图扩展动画maker
weixin_44143173的博客
07-29 337
1、扩展css3 .css_animation{ height:50px; width:50px; border-radius: 25px; background: rgba(250, 0, 0, 0.9); transform: scale(0); anima...
百度地图标注动画
小巷陌影
08-22 1509
百度地图标注，光圈闪烁动画效果
百度地图添加自定义图标标注以及自定义动画效果
weixin_44849078的博客
04-25 8997
百度地图添加自定义图标标注以及自定义动画效果1、添加自定义图标标注2、添加自定义动画效果2.1、标注对象marker的构成2.2、自定义动画效果实现过程2.3、最终实现效果 上次写的是添加自定义图标，但是用的是添加自定义覆盖物方法，结果不支持点聚合，这次写的还是添加自定义图标，但是可以支持点聚合，同时还加上了自定义动画效果。 1、添加自定义图标标注 代码如下，vue里记得把图标扔到static文件...
百度地图marker动画的实现
05-07
百度地图marker动画的实现，动画是基于css3的animation实现的，可以根据需求的不同修改乘不同的动画效果
js实现百度地图的自定义marker与css3动画的交互
weixin_63454527的博客
11-04 1668
js实现百度地图的自定义marker与css3动画的交互
基于百度地图API实现Marker选中动画效果
倚栏听风
10-21 828
<!-- * @Author: chenzhijie * @Date: 2021-10-21 11:54:02 * @LastEditors: chenzhijie * @LastEditTime: 2021-10-21 13:44:02 * @Description: Do not edit * @FilePath: \demo\testMap.html --> <!DOCTYPE html> <html lang="en"> &lt...
Vue3使用百度地图marker点位实现水波纹动效
nyasm的博客
01-26 873
【代码】Vue3使用百度地图marker点位实现水波纹动效。
百度地图自定义水波纹(雷达)效果覆盖物
05-07
本文将深入探讨如何利用百度地图API实现自定义的水波纹（雷达）效果覆盖物。 首先，我们需要了解百度地图API的基本概念。百度地图API是一套基于JavaScript语言的Web服务接口，它允许开发者在网页中嵌入地图，进行...
jQuery实现百度地图api选择城市地图效果
09-22
在这个场景下，"jQuery实现百度地图api选择城市地图效果"是一个常见的需求，它主要用于让用户能够方便地选择他们所在的城市或者感兴趣的城市。这个话题涉及到jQuery库的使用以及百度地图API的集成，下面将详细解释这...
百度地图自定义大头针（Marker）、自定义信息窗口（InfoBox）
10-16
你可以在“百度地图自定义窗口demo”中查看完整的实现方式，该示例可能包含了多个Marker和InfoBox，以及它们之间的交互逻辑。 **其他高级特性**： 除了基础的自定义，你还可以实现更多高级功能，如动态加载内容、...
百度地图自定义跳动的点,当有数据更新时提示加(增加的量)
01-28
这篇教程将探讨如何在百度地图上实现自定义跳动的点，以便在数据更新时向用户发出提示，显示增加的量。这在实时数据监控或者位置追踪的应用场景中尤其有用。 首先，我们需要了解百度地图API的基本概念。百度地图API...
百度地图学习笔记 标记动画
S_ubs的博客
02-24 1398
步骤： 基础功能暂时不表 代码： 主活动public class MainActivity extends Activity { MapView mMapView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState)
android 百度地图 marker 动画,Android 百度地图所有Marker点显示在屏幕内
weixin_39687422的博客
05-25 269
需求：把百度地图采集在数据库中所有的Marker点自动缩放，放在屏幕内！注意：1、必须在setOnMapLoadedCallback中调用缩放代码2、必须再次调用下面一段代码，否则还是不成功：MapStatusUpdate msu = MapStatusUpdateFactory.zoomBy(-0.8f);mBaiduMap.setMapStatus(msu);整体代码：//调整缩放级别：将所有...
百度地图覆盖物marker实现水波纹动效
pleaseprintf的博客
03-07 1163
【代码】百度地图覆盖物marker实现水波纹动效。
百度地图的基础和自定义动画的实践
weixin_42202310的博客
10-17 367
百度在线地图用于生成在线的地图，可以完成地图绘制、基本标记点，本文主要介绍百度地图API和百度gl模块的基本使用，无人机动画的介绍
百度地图 使用动画创建 动态点
qq_40806920的博客
08-26 1919
纯转载：原生js yyds 百度地图添加自定义图标标注以及自定义动画效果 1、添加自定义图标标注 2、添加自定义动画效果 2.1、标注对象marker的构成 2.2、自定义动画效果实现过程 2.3、最终实现效果 上次写的是添加自定义图标，但是用的是添加自定义覆盖物方法，结果不支持点聚合，这次写的还是添加自定义图标，但是可以支持点聚合，同时还加上了自定义动画效果。 1、添加自定义图标标注 代码如下，vue里记得把图标扔到static文件夹中或者图片服务器上，不然请求不到。 // 调用该方法后创建标注 .
CSS3 简介
最新发布
07-22 746
CSS3，即层叠样式表的第三代，是网页设计和开发中不可或缺的技术之一。它为HTML元素提供了更加丰富和灵活的样式定义，使得网页不仅结构清晰，而且外观精美，用户体验大大提升。CSS3引入了许多新特性，如圆角、阴影、渐变、动画等，这些特性使得网页设计更加生动和互动。
百度地图实现Marker沿路线运动
12-09
百度地图实现Marker沿路线运动的方法如下： 1.首先需要引入百度地图API的JavaScript文件，然后创建一个地图实例。 2.在地图上添加一个Marker，并设置Marker的图标和位置。 3.使用百度地图的API中的Polyline对象创建一条折线，并设置折线的路径。 4.使用百度地图的API中的DrivingRoute对象创建一个驾车路线实例，并设置起点和终点。 5.使用驾车路线实例的search()方法搜索驾车路线。 6.在驾车路线搜索完成后，使用驾车路线实例的getResults()方法获取驾车路线结果。 7.将驾车路线结果中的所有路段的路径合并成一个数组，并使用百度地图的API中的Polyline对象创建一条新的折线。 8.使用百度地图的API中的MarkerAnimation类创建一个Marker动画实例，并设置Marker动画的路径和速度。 9.启动Marker动画实例的start()方法，开始Marker沿路线运动。 下面是一个示例代码： ```javascript // 引入百度地图API <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> // 创建地图实例 var map = new BMap.Map("container"); // 创建Marker实例 var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 设置Marker图标 var icon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - 10 * 25) }); marker.setIcon(icon); // 添加Marker到地图上 map.addOverlay(marker); // 创建折线实例 var polyline = new BMap.Polyline([ new BMap.Point(116.404, 39.915), new BMap.Point(116.414, 39.915), new BMap.Point(116.424, 39.915) ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); // 添加折线到地图上 map.addOverlay(polyline); // 创建驾车路线实例 var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); // 设置起点和终点 var start = new BMap.Point(116.404, 39.915); var end = new BMap.Point(116.424, 39.915); driving.search(start, end); // 监听驾车路线搜索完成事件 driving.setSearchCompleteCallback(function(results){ // 获取驾车路线结果 var plan = results.getPlan(0); var route = plan.getRoute(0); // 合并所有路段的路径 var path = []; for (var i = 0; i < route.getNumSteps(); i++) { var step = route.getStep(i); var points = step.getPath(); for (var j = 0; j < points.length; j++) { path.push(points[j]); } } // 创建新的折线实例 var newPolyline = new BMap.Polyline(path, {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5}); // 添加新的折线到地图上 map.addOverlay(newPolyline); // 创建Marker动画实例 var markerAnimation = new BMap.MarkerAnimation(marker, newPolyline.getPath(), 100); // 启动Marker动画 markerAnimation.start(); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值