成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

百度地圖自定義控件

willin / 757人閱讀

摘要：百度地圖自定義控件百度地圖的原生控件已經(jīng)很多了，但總會有些時候我們需要自己寫個控件來實現(xiàn)某些功能自定義控件的實現(xiàn)原理看了百度地圖的文檔發(fā)現(xiàn)實現(xiàn)自定義控件的原理也不復雜自己創(chuàng)建一個控件類繼承百度地圖的類的原型將要實現(xiàn)功能的邏輯寫在原型的方法中

百度地圖自定義控件 
百度地圖的原生控件已經(jīng)很多了，但總會有些時候我們需要自己寫個控件來實現(xiàn)某些功能
自定義控件的實現(xiàn)原理 
看了百度地圖的文檔發(fā)現(xiàn)實現(xiàn)自定義控件的原理也不復雜
1、 自己創(chuàng)建一個控件類繼承百度地圖的Control類的原型
2、 將要實現(xiàn)功能的邏輯寫在原型的initialize()方法中
3、 實例化我們創(chuàng)建的控件類
4、 把實例化的控件掛載到地圖實例上
代碼 
自己來實現(xiàn)一個回到初始位置的地圖控件

創(chuàng)建一個自己的控件類

import BMap from "BMap"
import bus from "../bus/bus"
class MapInitControl extends BMap.Control {
  constructor (option) {
    super()
    // 默認?？课恢煤推屏?    // 也可以由傳入的參數(shù)控制
    this.defaultAnchor = option.anchor || BMAP_ANCHOR_TOP_RIGHT
    this.defaultOffset = option.offset || new BMap.Size(20, 20)
    // 自定義參數(shù)
    // .....
  }
  initialize (map) {
    // 這個初始化方法需要傳入map，但事實上使用時沒有手動調(diào)用initialize方法，也就沒有傳入map地圖實例
    // 在添加這個控件實例到地圖上時，自動調(diào)用初始化方法，然后傳入了當前的地圖實例
    // 使用一個自己不需要手動傳入的參數(shù)還是感覺有那么一點怪異
    // console.log(map)
    const div = document.createElement("div")
    // 添加文字說明
    div.appendChild(document.createTextNode("初始位置"));
    // 設置樣式
    div.style.cursor = "pointer"
    div.style.border = ".5px solid #aaa"
    div.style.fontSize = "12px"
    div.style.backgroundColor = "rgba(139, 164, 220, .9)"
    div.style.color = "rgb(255, 255, 255)"
    div.style.padding = "3px 6px"
    div.style.boxShadow = "2px 2px 3px rgba(0, 0, 0, 0.35)"
    // div.s
    // 監(jiān)聽點擊事件
    div.addEventListener("click", () => {
      bus.$emit("setViewport")
    })
    // 添加DOM元素到地圖中
    map.getContainer().appendChild(div)
    // 將DOM元素返回
    return div
  }
}

export default MapInitControl
官方demo上用的是ES5的寫法，也就是用Function的方式來寫，我為了代碼統(tǒng)一用的是ES6的class寫法，反正都是為了繼承Control的原型方法
然后我并沒有在點擊事件中直接調(diào)用 map.setViewport()的方法，而是用Vue的bus直接emit了一個事件出去，主要也是為了業(yè)務考慮，主要是地圖上的點會一直變動，這樣可以在捕獲到事件的時候，再動態(tài)的計算地圖上的點
使用 
// 添加一個自定義控件，返回地圖初始位置
addMapInitControl () {
    // console.log(this.points)
    let myMapInitControl = new MapInitControl({
        anchor:window.BMAP_ANCHOR_TOP_RIGHT,
        offset: new window.BMap.Size(22,80)
    })
    this.bmap.addControl(myMapInitControl)
}

// 觸發(fā)回到中心點事件
bus.$on("setViewport", () => {
    // console.log("i get")
    // console.log(this.data)
    let points = this.getAllPoints()
    points.length > 0 && this.bmap.setViewport(points)
})
效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104326.html

相關文章

  • 第三方庫

    摘要：微信支付，支付寶支付，銀聯(lián)支付三大支付總結(jié)支付寶植入總結(jié)支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程 強大輕量的動畫庫 anime.js 入門教程 來自B站的開源的MagicaSakura源...

    seanHai 評論0 收藏0

  • 第三方庫

    摘要：微信支付，支付寶支付，銀聯(lián)支付三大支付總結(jié)支付寶植入總結(jié)支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程 強大輕量的動畫庫 anime.js 入門教程 來自B站的開源的MagicaSakura源...

    gityuan 評論0 收藏0

  • 百度地圖使用

    摘要：項目已放到上在線預覽效果截圖添加點圖標經(jīng)緯度圖標和后臺獲取之后的點定位點的經(jīng)緯度獲取數(shù)據(jù)點擊之后圖標和報修圖標配置信息跳轉(zhuǎn)鏈接循環(huán)添加多個點圖標定位點的經(jīng)緯度獲取的數(shù)據(jù)圖標的和點擊之后圖標和，報修圖標配置百度地圖創(chuàng)建 項目已放到github上 在線預覽 showImg(https://segmentfault.com/img/bV4OmH?w=280&h=280); 效果截圖 show...

    jay_tian 評論0 收藏0

  • vue地圖可視化 ArcGIS篇（3）

    摘要：不建議底圖選擇中存在兩種不同坐標體系，如下圖坐標存在明顯的偏差，火星坐標在采用坐標系的地圖上位置偏上彩色中國天地圖全球衛(wèi)星地圖例如我們使用的類進行查找，返回的數(shù)據(jù)都是國際坐標，因此必須進行偏差糾正。 ArcGIS for javascript開發(fā)心得 本次實例中采用ArcGIS for javascript3.24版本，由于版本3與4在API等存在較大區(qū)別，就不一一列舉，詳細區(qū)別看官方...

    oogh 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<