如何在vue中使用百度地图添加自定义覆盖物(水波纹)


Posted in Javascript onNovember 03, 2020

简介

一如既往,我来给大家分享一个项目中遇到的比较有意思的需求并介绍一下相应的实现过程。

话不多说,直接上图:

如何在vue中使用百度地图添加自定义覆盖物(水波纹)

具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物。实现的过程作者分为以下两点给大家介绍介绍。

  • 水波?的实现
  • 自定义覆盖物的实现

水波?的实现

这个需求的实现肯定是离不开我们自己写自定义覆盖物的,那么首先我们来讨论一下水波纹动画的实现。

首先我们可以看到图中的覆盖物是由一个红心和水波?组成,其中红心是固定不动的,那么我们可以直接这么写:

<div class="radar"></div>
.radar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
 }

如何在vue中使用百度地图添加自定义覆盖物(水波纹)

这样子我们首先就实现了红心部分的样式。那么水波?又是怎么实现的呢?

我们可以从图中观察得出先后总共有三个水波?从里到外逐渐的往外扩散。我们单独从一个水波?来看的话,其实往外扩散的原理是通过动画让水波?的宽高逐渐递增到一定程度即可,具体扩散多大呢读者可以根据自己的需求设定水波?的最后宽高。

水波?的基本结构和样式实现如下:

<div class="radar">
 <div class="ripple"></div>
 <div class="ripple"></div>
 <div class="ripple"></div>
 </div>
.radar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: red;
 position: relative;
 .ripple {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid red;
  animation: ripple 2s linear infinite;
 }
 }

之所以将水波?的dom节点嵌套在radar节点里面主要是做一个“子绝父相”定位以达到水波?居中对齐的效果,这个应该很容易理解。至于水波?的初始宽高呢,为了方便动画延迟时间的计算,我就设置为跟红心宽高相等即可,如果读者有兴趣可以尝试一下宽高设置在0~40px任意值的看看效果(作者盲猜动画可能会有点瑕疵,可能也不会------>“手动狗头”))。

至于动画的实现呢,这个就很简单了,我们只需要同时将水波?的宽高都逐渐变大即可,但是有个点要注意一下就是水波?最后是会消失的,这里我们利用opacity:0配合动画达到逐渐消失的效果。

@keyframes ripple {
 to {
  width: 150px;
  height: 150px;
  opacity: 0;
 }
 }

代码到了这里,我们水波?已经是实现了,但是不是少了点什么?说好的三个水波?呢?

这个问题也很好解决,我们只需要给水波?设置对应的动画延迟即可。

.radar :nth-child(1) {
 animation-delay: 0.666s;
 }
 .radar :nth-child(2) {
 animation-delay: 1.322s;
 }

这样子我们就把水波?给实现出来啦。

如何在vue中使用百度地图添加自定义覆盖物(水波纹)

自定义覆盖物的实现

本次作者采用的是百度地图实现的需求,那么如何通过百度地图来实现自定义覆盖物呢?

其实百度地图开发文档中也很直白的向我们展示自定义覆盖物的开箱方法。这里作者用es6的class稍微改写了一下写法,道理都一样的,官方案例可以参考百度地图demo

自定义覆盖物实现分以下三步:

  • 定义构造函数并继承Overlay
  • 初始化自定义覆盖物
  • 绘制覆盖物

定义构造函数并继承Overlay

按照官网的说法是:“首先您需要定义自定义覆盖物的构造函数,通过构造函数参数可以传递一些自由的变量。设置自定义覆盖物对象的prototype属性为Overlay的实例,以便继承覆盖物基类”。

运用es6 class我们可以很快的实现:

其中point传递的是坐标位置,用于后续计算覆盖物在地图上的位置。

class RadarOverlay extends BMap.Overlay	{
 constructor(point) {
  super();
  this.point = point;
 }
}

初始化自定义覆盖物

官方的说法是:“实现initialize方法,当调用map.addOverlay方法时,API会调用此方法。当调用map.addOverlay方法添加自定义覆盖物时,API会调用该对象的initialize方法用来初始化覆盖物,在初始化过程中需要创建覆盖物所需要的DOM元素,并添加到地图相应的容器中。这里我们选择添加在容器markerPane上。”

其实意思大概就是说,因为百度地图在添加overLay时会调用自定义覆盖物构造函数中的initialize方法,这个initialize方法是用来初始化覆盖物的,他会在初始化过程中创建所需要的DOM,因此我们要在我们自己的构造函数(这里我们用的是类)中实现一个initialize。

百度地图官网的方法:

如何在vue中使用百度地图添加自定义覆盖物(水波纹)

那么我们就按照官网的要求,在类中定义一个initialize方法。其中template存的是我们初始化中所需要的DOM元素,这里的dom节点会比上文中实现水波纹的环节多了一个className为rader-box的父节点,因为在官网中我们也可以看到官方实例在创建DOM元素时给DOM节点添加了position:absolute的样式,但由于我们的radar节点的position为relative,所以我们需要在最外层多嵌套一层dom节点以确保整个dom相对于地图定位。当然啦该父节点的position也就为绝对定位

initialize(map) {
  this._map = map;
  const template = `<div class="radar-box">
   <div class="radar">
    <div class="ripple"></div>
    <div class="ripple"></div>
    <div class="ripple"></div>
   </div>
  </div>`;
  // 创建文档碎片
  const divFragment = document.createRange().createContextualFragment(template);
  const div = divFragment.querySelectorAll('.radar-box')[0];
  // 将div添加到覆盖物容器中
  map.getPanes().markerPane.appendChild(div);
  this._div = div;
  return div;
 }

这样子我们就成功的在类中定义了一个initialize方法,至于为什么要将div添加到覆盖物容器中官网的也有如下说明:

大概就是说百度地图里面已经给我们提供了若干的覆盖物展示方法,我们自定义的覆盖物其实是保存在我们选择的其中某个覆盖物容器之下,有兴趣的小伙伴可以去了解一下各种覆盖物容器。。。

绘制覆盖物

这里作者继续抛砖引玉阿,官方的说法是:“到目前为止,我们仅仅把覆盖物添加到了地图上,但是并没有将它放置在正确的位置上。您需要在draw方法中设置覆盖物的位置,每当地图状态发生变化(比如:位置移动、级别变化)时,API都会调用覆盖物的draw方法,用于重新计算覆盖物的位置。通过map.pointToOverlayPixel方法可以将地理坐标转换到覆盖物的所需要的像素坐标。”

简单来讲就是比如地图缩放比例之后,会重新调用覆盖物中的draw方法,用于重新鸡算覆盖物的位置。

那么问题来了,draw方法哪里来的?

所以官方的意思是我们在自定义覆盖物中的构造函数定义一个draw方法,方法中我们利用百度地图的map.pointToOverlayPixel方法(用来将地理坐标转换为像素坐标)可以将地理坐标转换到覆盖物的所需要的像素坐标。
那么我们只需要在类中加入draw方法即可:

其中this.point就是我们构造函数中的point坐标点,40表示的是我们整个水波纹的初始宽高,读者其实可以将40改为可以传参的形式比如this.size,这样会方便后续代码的维护,这里为了直观的让读者理解就不讲太复杂了。

draw() {
  // 根据地理坐标转换为像素坐标,并设置给容器
  const position = this._map.pointToOverlayPixel(this.point);
  this._div.style.left = `${position.x - 40 / 2}px`;
  this._div.style.top = `${position.y - 40 / 2}px`;
 }

到此,我们整个自定义覆盖物的类就已经实现了,整体代码图下(这里把40改为this.size代码维护起来稍微方便点):

class RadarOverlay extends BMap.Overlay {
 constructor(point, size) {
  super();
  this.point = point;
  this.size = size;
 }

 initialize(map) {
  this._map = map;
  const template = `<div class="radar-box">
    <div class="radar">
     <div class="ripple"></div>
     <div class="ripple"></div>
     <div class="ripple"></div>
    </div>
   </div>`;
  const divFragment = document.createRange().createContextualFragment(template);
  const div = divFragment.querySelectorAll('.radar-box')[0];
  map.getPanes().markerPane.appendChild(div);
  this._div = div;
  return div;
 }

 draw() {
  // 根据地理坐标转换为像素坐标,并设置给容器
  const position = this._map.pointToOverlayPixel(this.point);
  this._div.style.left = `${position.x - this.size / 2}px`;
  this._div.style.top = `${position.y - this.size / 2}px`;
 }
}

自定义覆盖物的使用

那既然我们都已经实现了自定义的覆盖物,第一件事当然就是把它给使用上,具体如下:

initMap() {
   const map = new BMap.Map(this.$refs.map);
   map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
   // 实例化我们要绘制自定义覆盖物的点坐标
   const point = new BMap.Point(116.404, 39.915);   
	// 实例化自定义覆盖物,将坐标点和水波纹的尺寸传进构造函数中
   const radar = new RadarOverlay(point, 40);  
   // 添加自定义覆盖物
   map.addOverlay(radar);
  }

效果如图:

如何在vue中使用百度地图添加自定义覆盖物(水波纹)

结语

至于构造自定义覆盖物的其他内容,大佬们如果要深入的话可以参考百度地图的文档,里面讲的肯定要比作者更加详细(狗头)。如果文章的内容有问题话的欢迎留言点出,希望能与各路大佬们交流交流,喜欢作者的文章的话也别忘了给我点个赞,这对我来说很重要。

源码地址:https://gitee.com/zhao_jiahao/baidu-map-custom-cover

到此这篇关于如何在vue中使用百度地图添加自定义覆盖物(水波纹)的文章就介绍到这了,更多相关vue用百度地图添加自定义覆盖物内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
js作用域及作用域链工作引擎
Jul 07 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 #Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 #Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 #Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 #Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 #Javascript
使用vant的地域控件追加全部选项
Nov 03 #Javascript
vue vant中picker组件的使用
Nov 03 #Javascript
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
PHP 文件扩展名 获取函数
2009/06/03 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
RequireJs的使用详解
2017/02/19 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Vue实现手机计算器
2020/08/17 Javascript
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
快速了解Python相对导入
2018/01/12 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
五一服装活动方案
2014/01/11 职场文书
会计职业生涯规划书
2014/01/13 职场文书
优秀员工演讲稿
2014/05/19 职场文书
商务经理岗位职责
2014/07/30 职场文书
结婚堵门保证书
2015/05/08 职场文书
电影红河谷观后感
2015/06/11 职场文书
安全生产感想
2015/08/07 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android