VU3封装的百度地图组件，实现各种功能，自定义图标、自定义窗体、水波纹动画等

已于 2022-09-28 11:31:02 修改
阅读量639 收藏
点赞数 1
分类专栏： 前端技术 文章标签： vue 大屏端
于 2022-09-28 09:43:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/enghe/article/details/127083330
版权

实现以下功能：
1、VU3百度地图根据当前IP定位城市
2、VU3百度地图创建自定义MARKER图标
3、VU3百度地图创建自定义窗体信息
4、VU3百度地图单击自定义窗体定位放大跳转到具体位置
5、VU3百度地图MARKER图标实现水波纹动画效果
代码详细地址： https://download.csdn.net/download/enghe/86724975
在这里插入图片描述
在这里插入图片描述

enghe
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue 和 百度地图，创建自定义图标和自定义提示窗
墨书白的博客
01-18 2136
引入百度地图API于 public/index.html 中，API如下： <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"> 若没有账号（也就是没有秘钥）可以自行申请☞方法点击此处 验证，map是否已经加载成功： console.log(BMap) <!-- 控制台出现如下，则成功 --> 正题=》 1.首先创建地
vue 使用百度地图+自定义消息窗口样式
qq_38327141的博客
05-12 2536
vue 使用百度地图+自定义消息窗口样式前言安装百度地图导入百度地图包百度地图组件封装准备百度地图组件函数封装百度地图页面加载完成后执行函数百度地图信息窗口样式自定义完整组件代码附上效果图 前言 好久没有提笔，这几天又遇到困难了,昨天vue的百度地图插件差点没把我弄死,现在问题得以解决,记录一下 另外提及一下,在写这个帖子时我才接触vue一周,本帖仅记录学习过程与分享结果,本人水平垃圾,不喜勿喷 安装百度地图 安装百度地图vue包 npm install vue-baidu-map 导入百度地图包
百度地图自定义水波纹(雷达)效果覆盖物
05-07
百度地图自定义水波纹(雷达)效果覆盖物
如何在Vue3中使用地图库Leaflet实现地图展示？
最新发布
有我更精彩的博客
06-15 1343
现在我们已经成功在 Vue 3 项目中集成了 Leaflet，并展示了基本功能。接下来，我们可以探索更多高级功能和自定义。例如，为了添加更多自定义标记，您可以修改文件：});} , };});} , };});} , };});} , };});} , };</});} , };</});} , };
百度地图覆盖物marker实现水波纹动效
pleaseprintf的博客
03-07 1192
【代码】百度地图覆盖物marker实现水波纹动效。
Vue使用百度地图 自定义信息窗口InfoWindow的样式
GongWei_的博客
01-12 6720
效果 1、首先可以找到百度地图信息窗口的class名，根据class名去修改样式 我这里只修改了标题的样式 //百度地图信息弹窗标题 .BMap_bubble_title{ font-weight: 700!important; margin-bottom: 10px; font-size: 16px; } 2、窗口中心内容的样式，是自己写标签已经样式 var marker = new BMap.Marker(new BMap.Point(112.14,22.125)); map.addO
如何在vue中使用百度地图添加自定义覆盖物（水波纹）
01-22
简介 一如既往，我来给大家分享一个项目中遇到的比较有意思的需求并介绍一下相应的实现过程。 话不多说，直接上图： 具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物。实现的过程作者分为以下两点给大家介绍介绍。 水波紋的实现 自定义覆盖物的实现 水波紋的实现 这个需求的实现肯定是离不开我们自己写自定义覆盖物的，那么首先我们来讨论一下水波纹动画的实现。 首先我们可以看到图中的覆盖物是由一个红心和水波紋组成，其中红心是固定不动的，那么我们可以直接这么写： <div class=radar></div> .radar { width: 40px; he
Vue组件之自定义事件的功能图解
11-28
使用v-on绑定自定义事件 （一）基于webpack的项目...安装完成后，myapp文件夹下会自动生成一些文件和文件夹，表示我们项目初始化完成，而我们的的APP.vu是主组件，components组件是Vue的一种代码复用的机制,componen
完善的vue+elementui的自定义transfer组件
10-16
对之前已做的transfer组件做完善，新增已选列表搜索功能，修复搜索数据重复问题
Qt自定义精美控件十套demo源码-续II
09-01
通过学习这些源码，初学者不仅可以了解Qt控件的基本原理，还能学习到如何利用Qt的事件处理、绘图、动画和样式定制等功能，提升自己的开发技能。这些自定义控件对于提升应用的用户体验和视觉吸引力有着重要作用，同时...
百度地图marker动画的实现
05-07
百度地图marker动画的实现，动画是基于css3的animation实现的，可以根据需求的不同修改乘不同的动画效果
百度地图PC web端，覆盖物marker实现水波纹扩散覆盖效果（JavaScript实现）
yingjia11的博客
01-18 7567
应公司要求，在发生告警时，告警会自动推送给2公里范围内人员，而地图上需要展示2公里范围距离覆盖了哪些人员，因此需要在百度地图上实现2公里警覆盖效果。查阅了百度地图API发现，存咋BMap.Circle这个对象可实现绘圆形覆盖，如下： 实现代码： //绘制覆盖物***************************************** var circle = new BM...
Vue3版本 水波纹特效 (亲测有效 开箱即用)
2303_77072102的博客
01-05 1099
import { ripple } from '@/directives/waves/waves' //这是我的路径。步骤一:创建一个waves.ts文件(直接复制即可 在vue3项目保证可以用)没用ts的话就直接把语法声明去掉即可。const vRipple = ripple//这个常量名就是后面页面会使用的指令名 可以随便命名。步骤二:在需要使用的页面进行引入你创建的waves.ts路径同时注册指令。下图是使用页面的截图主要红框标注的地方即可 不然会导致水波纹定位不准确。// 自定义水波纹指令。
Vue中使用百度地图demo Vue Baidu Map(vue-baidu-map)设置窗口信息
冰恋云的专栏
09-25 1666
1.全局引入 安装npm install --save vue-baidu-map 1.2全局配置 在main.js中配置 效果图: 二.代码 <template> <div class="hello"> <h1>{{ msg }}</h1> <!--百度地图--> <baidu-map class="bm-view" :center="center" ...
vue项目中百度地图自定义图标
夏夏
06-16 2586
1.首先，准备好需要的图标 2.在页面中引入图标 var jigouIcon = new BMap.Icon( require("@/assets/image/index/jianzhu.svg"), new BMap.Size(80, 80), { imageSize: new BMap.Size(40,40), 　　　　　 imageOffset:new BMap.Size(0,0) 　　　　 } ); ...
vue3 primevue水波纹bug
九段刀客的博客
04-17 217
"primevue": "3.12.4", <script setup> //只要用了setup语法糖，里面有任何内容都会导致水波纹失效 </script>
VUE3 实现高德地图点聚合水波纹效果
Sy941210的博客
10-19 691
npm add less-loader 或者 yarn add less-loader。npm add less less 或者 yarn add less less。无法使用yarn，可通过。高德点聚合水波纹效果。
vu e组件封装简单案例
06-07
假设我们要封装一个名为 "my-button" 的按钮组件，该组件包含以下功能： 1. 可以自定义按钮文本。 2. 点击按钮时触发一个自定义事件。 首先，我们需要在 Vue 中注册一个全局组件： ```javascript Vue.component('...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

enghe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值