亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何在vue中使用百度地圖添加自定義覆蓋物(水波紋)

 更新時(shí)間:2020年11月03日 10:58:47   作者:紅領(lǐng)巾小莫  
這篇文章主要給大家介紹了關(guān)于如何在vue中使用百度地圖添加自定義覆蓋物(水波紋)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

簡介

一如既往,我來給大家分享一個(gè)項(xiàng)目中遇到的比較有意思的需求并介紹一下相應(yīng)的實(shí)現(xiàn)過程。

話不多說,直接上圖:

具體的應(yīng)用場景簡而言之就是需要我們在地圖上添加如圖中所示的自定義覆蓋物。實(shí)現(xiàn)的過程作者分為以下兩點(diǎn)給大家介紹介紹。

  • 水波紋的實(shí)現(xiàn)
  • 自定義覆蓋物的實(shí)現(xiàn)

水波紋的實(shí)現(xiàn)

這個(gè)需求的實(shí)現(xiàn)肯定是離不開我們自己寫自定義覆蓋物的,那么首先我們來討論一下水波紋動(dòng)畫的實(shí)現(xiàn)。

首先我們可以看到圖中的覆蓋物是由一個(gè)紅心和水波紋組成,其中紅心是固定不動(dòng)的,那么我們可以直接這么寫:

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

這樣子我們首先就實(shí)現(xiàn)了紅心部分的樣式。那么水波紋又是怎么實(shí)現(xiàn)的呢?

我們可以從圖中觀察得出先后總共有三個(gè)水波紋從里到外逐漸的往外擴(kuò)散。我們單獨(dú)從一個(gè)水波紋來看的話,其實(shí)往外擴(kuò)散的原理是通過動(dòng)畫讓水波紋的寬高逐漸遞增到一定程度即可,具體擴(kuò)散多大呢讀者可以根據(jù)自己的需求設(shè)定水波紋的最后寬高。

水波紋的基本結(jié)構(gòu)和樣式實(shí)現(xiàn)如下:

 <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節(jié)點(diǎn)嵌套在radar節(jié)點(diǎn)里面主要是做一個(gè)“子絕父相”定位以達(dá)到水波紋居中對齊的效果,這個(gè)應(yīng)該很容易理解。至于水波紋的初始寬高呢,為了方便動(dòng)畫延遲時(shí)間的計(jì)算,我就設(shè)置為跟紅心寬高相等即可,如果讀者有興趣可以嘗試一下寬高設(shè)置在0~40px任意值的看看效果(作者盲猜動(dòng)畫可能會(huì)有點(diǎn)瑕疵,可能也不會(huì)------>“手動(dòng)狗頭”))。

至于動(dòng)畫的實(shí)現(xiàn)呢,這個(gè)就很簡單了,我們只需要同時(shí)將水波紋的寬高都逐漸變大即可,但是有個(gè)點(diǎn)要注意一下就是水波紋最后是會(huì)消失的,這里我們利用opacity:0配合動(dòng)畫達(dá)到逐漸消失的效果。

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

代碼到了這里,我們水波紋已經(jīng)是實(shí)現(xiàn)了,但是不是少了點(diǎn)什么?說好的三個(gè)水波紋呢?

這個(gè)問題也很好解決,我們只需要給水波紋設(shè)置對應(yīng)的動(dòng)畫延遲即可。

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

這樣子我們就把水波紋給實(shí)現(xiàn)出來啦。

自定義覆蓋物的實(shí)現(xiàn)

本次作者采用的是百度地圖實(shí)現(xiàn)的需求,那么如何通過百度地圖來實(shí)現(xiàn)自定義覆蓋物呢?

其實(shí)百度地圖開發(fā)文檔中也很直白的向我們展示自定義覆蓋物的開箱方法。這里作者用es6的class稍微改寫了一下寫法,道理都一樣的,官方案例可以參考百度地圖demo

自定義覆蓋物實(shí)現(xiàn)分以下三步:

  • 定義構(gòu)造函數(shù)并繼承Overlay
  • 初始化自定義覆蓋物
  • 繪制覆蓋物

定義構(gòu)造函數(shù)并繼承Overlay

按照官網(wǎng)的說法是:“首先您需要定義自定義覆蓋物的構(gòu)造函數(shù),通過構(gòu)造函數(shù)參數(shù)可以傳遞一些自由的變量。設(shè)置自定義覆蓋物對象的prototype屬性為Overlay的實(shí)例,以便繼承覆蓋物基類”。

運(yùn)用es6 class我們可以很快的實(shí)現(xiàn):

其中point傳遞的是坐標(biāo)位置,用于后續(xù)計(jì)算覆蓋物在地圖上的位置。

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

初始化自定義覆蓋物

官方的說法是:“實(shí)現(xiàn)initialize方法,當(dāng)調(diào)用map.addOverlay方法時(shí),API會(huì)調(diào)用此方法。當(dāng)調(diào)用map.addOverlay方法添加自定義覆蓋物時(shí),API會(huì)調(diào)用該對象的initialize方法用來初始化覆蓋物,在初始化過程中需要?jiǎng)?chuàng)建覆蓋物所需要的DOM元素,并添加到地圖相應(yīng)的容器中。這里我們選擇添加在容器markerPane上?!?/p>

其實(shí)意思大概就是說,因?yàn)榘俣鹊貓D在添加overLay時(shí)會(huì)調(diào)用自定義覆蓋物構(gòu)造函數(shù)中的initialize方法,這個(gè)initialize方法是用來初始化覆蓋物的,他會(huì)在初始化過程中創(chuàng)建所需要的DOM,因此我們要在我們自己的構(gòu)造函數(shù)(這里我們用的是類)中實(shí)現(xiàn)一個(gè)initialize。

百度地圖官網(wǎng)的方法:

那么我們就按照官網(wǎng)的要求,在類中定義一個(gè)initialize方法。其中template存的是我們初始化中所需要的DOM元素,這里的dom節(jié)點(diǎn)會(huì)比上文中實(shí)現(xiàn)水波紋的環(huán)節(jié)多了一個(gè)className為rader-box的父節(jié)點(diǎn),因?yàn)樵诠倬W(wǎng)中我們也可以看到官方實(shí)例在創(chuàng)建DOM元素時(shí)給DOM節(jié)點(diǎn)添加了position:absolute的樣式,但由于我們的radar節(jié)點(diǎn)的position為relative,所以我們需要在最外層多嵌套一層dom節(jié)點(diǎn)以確保整個(gè)dom相對于地圖定位。當(dāng)然啦該父節(jié)點(diǎn)的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>`;
  // 創(chuàng)建文檔碎片
  const divFragment = document.createRange().createContextualFragment(template);
  const div = divFragment.querySelectorAll('.radar-box')[0];
  // 將div添加到覆蓋物容器中
  map.getPanes().markerPane.appendChild(div);
  this._div = div;
  return div;
 }

這樣子我們就成功的在類中定義了一個(gè)initialize方法,至于為什么要將div添加到覆蓋物容器中官網(wǎng)的也有如下說明:

大概就是說百度地圖里面已經(jīng)給我們提供了若干的覆蓋物展示方法,我們自定義的覆蓋物其實(shí)是保存在我們選擇的其中某個(gè)覆蓋物容器之下,有興趣的小伙伴可以去了解一下各種覆蓋物容器。。。

繪制覆蓋物

這里作者繼續(xù)拋磚引玉阿,官方的說法是:“到目前為止,我們僅僅把覆蓋物添加到了地圖上,但是并沒有將它放置在正確的位置上。您需要在draw方法中設(shè)置覆蓋物的位置,每當(dāng)?shù)貓D狀態(tài)發(fā)生變化(比如:位置移動(dòng)、級別變化)時(shí),API都會(huì)調(diào)用覆蓋物的draw方法,用于重新計(jì)算覆蓋物的位置。通過map.pointToOverlayPixel方法可以將地理坐標(biāo)轉(zhuǎn)換到覆蓋物的所需要的像素坐標(biāo)?!?/p>

簡單來講就是比如地圖縮放比例之后,會(huì)重新調(diào)用覆蓋物中的draw方法,用于重新雞算覆蓋物的位置。

那么問題來了,draw方法哪里來的?

所以官方的意思是我們在自定義覆蓋物中的構(gòu)造函數(shù)定義一個(gè)draw方法,方法中我們利用百度地圖的map.pointToOverlayPixel方法(用來將地理坐標(biāo)轉(zhuǎn)換為像素坐標(biāo))可以將地理坐標(biāo)轉(zhuǎn)換到覆蓋物的所需要的像素坐標(biāo)。
那么我們只需要在類中加入draw方法即可:

其中this.point就是我們構(gòu)造函數(shù)中的point坐標(biāo)點(diǎn),40表示的是我們整個(gè)水波紋的初始寬高,讀者其實(shí)可以將40改為可以傳參的形式比如this.size,這樣會(huì)方便后續(xù)代碼的維護(hù),這里為了直觀的讓讀者理解就不講太復(fù)雜了。

 draw() {
  // 根據(jù)地理坐標(biāo)轉(zhuǎn)換為像素坐標(biāo),并設(shè)置給容器
  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`;
 }

到此,我們整個(gè)自定義覆蓋物的類就已經(jīng)實(shí)現(xiàn)了,整體代碼圖下(這里把40改為this.size代碼維護(hù)起來稍微方便點(diǎn)):

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() {
  // 根據(jù)地理坐標(biāo)轉(zhuǎn)換為像素坐標(biāo),并設(shè)置給容器
  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`;
 }
}

自定義覆蓋物的使用

那既然我們都已經(jīng)實(shí)現(xiàn)了自定義的覆蓋物,第一件事當(dāng)然就是把它給使用上,具體如下:

  initMap() {
   const map = new BMap.Map(this.$refs.map);
   map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
   // 實(shí)例化我們要繪制自定義覆蓋物的點(diǎn)坐標(biāo)
   const point = new BMap.Point(116.404, 39.915);   
	// 實(shí)例化自定義覆蓋物,將坐標(biāo)點(diǎn)和水波紋的尺寸傳進(jìn)構(gòu)造函數(shù)中
   const radar = new RadarOverlay(point, 40);  
   // 添加自定義覆蓋物
   map.addOverlay(radar);
  }

效果如圖:

結(jié)語

至于構(gòu)造自定義覆蓋物的其他內(nèi)容,大佬們?nèi)绻钊氲脑捒梢詤⒖及俣鹊貓D的文檔,里面講的肯定要比作者更加詳細(xì)(狗頭)。如果文章的內(nèi)容有問題話的歡迎留言點(diǎn)出,希望能與各路大佬們交流交流,喜歡作者的文章的話也別忘了給我點(diǎn)個(gè)贊,這對我來說很重要。

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

到此這篇關(guān)于如何在vue中使用百度地圖添加自定義覆蓋物(水波紋)的文章就介紹到這了,更多相關(guān)vue用百度地圖添加自定義覆蓋物內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue computed的set方法無效問題及解決

    vue computed的set方法無效問題及解決

    這篇文章主要介紹了vue computed的set方法無效問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • 詳解Vue中使用Echarts的兩種方式

    詳解Vue中使用Echarts的兩種方式

    這篇文章主要介紹了Vue中使用Echarts的兩種方式,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-07-07
  • vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法

    vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法

    Axios是一款網(wǎng)絡(luò)前端請求框架,本文主要介紹了vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • 使用Vuex解決Vue中的身份驗(yàn)證問題

    使用Vuex解決Vue中的身份驗(yàn)證問題

    這篇文章主要介紹了使用Vuex解決Vue中的身份驗(yàn)證問題,本文通過文字實(shí)例相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2018-09-09
  • VueRouter路由模式全面解析

    VueRouter路由模式全面解析

    這篇文章主要介紹了VueRouter路由模式的用法,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • Element中el-input密碼輸入框?yàn)g覽器自動(dòng)填充賬號密碼問題的解決方法

    Element中el-input密碼輸入框?yàn)g覽器自動(dòng)填充賬號密碼問題的解決方法

    自己寫了一個(gè)管理系統(tǒng),登錄成功之后,瀏覽器提示我保存賬號密碼,每次登錄時(shí)就會(huì)自動(dòng)回填記住的賬號密碼,方便用戶快速登錄,下面這篇文章主要給大家介紹了關(guān)于Element中el-input密碼輸入框?yàn)g覽器自動(dòng)填充賬號密碼問題的解決方法,需要的朋友可以參考下
    2022-09-09
  • rollup3.x+vue2打包組件的實(shí)現(xiàn)

    rollup3.x+vue2打包組件的實(shí)現(xiàn)

    本文主要介紹了rollup3.x+vue2打包組件的實(shí)現(xiàn),詳細(xì)的介紹了打包會(huì)存在的問題,包版本的問題,babel 轉(zhuǎn)換jsx等問題,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-03-03
  • Vue+webpack實(shí)現(xiàn)懶加載過程解析

    Vue+webpack實(shí)現(xiàn)懶加載過程解析

    這篇文章主要介紹了Vue+webpack實(shí)現(xiàn)懶加載過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-02-02
  • vue實(shí)現(xiàn)電子時(shí)鐘效果

    vue實(shí)現(xiàn)電子時(shí)鐘效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)電子時(shí)鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 基于Vue全局組件與局部組件的區(qū)別說明

    基于Vue全局組件與局部組件的區(qū)別說明

    這篇文章主要介紹了基于Vue全局組件與局部組件的區(qū)別說明,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08

最新評論