百度地圖自定義控件

willin 發布于2019-08-23 17:54 / 685人閱讀

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

百度地圖自定義控件

百度地圖的原生控件已經很多了，但總會有些時候我們需要自己寫個控件來實現某些功能

自定義控件的實現原理

看了百度地圖的文檔發現實現自定義控件的原理也不復雜
1、 自己創建一個控件類繼承百度地圖的Control類的原型
2、 將要實現功能的邏輯寫在原型的initialize()方法中
3、 實例化我們創建的控件類
4、 把實例化的控件掛載到地圖實例上

代碼

自己來實現一個回到初始位置的地圖控件

創建一個自己的控件類

import BMap from "BMap"
import bus from "../bus/bus"
class MapInitControl extends BMap.Control {
  constructor (option) {
    super()
    // 默認停靠位置和偏移量
    // 也可以由傳入的參數控制
    this.defaultAnchor = option.anchor || BMAP_ANCHOR_TOP_RIGHT
    this.defaultOffset = option.offset || new BMap.Size(20, 20)
    // 自定義參數
    // .....
  }
  initialize (map) {
    // 這個初始化方法需要傳入map，但事實上使用時沒有手動調用initialize方法，也就沒有傳入map地圖實例
    // 在添加這個控件實例到地圖上時，自動調用初始化方法，然后傳入了當前的地圖實例
    // 使用一個自己不需要手動傳入的參數還是感覺有那么一點怪異
    // 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
    // 監聽點擊事件
    div.addEventListener("click", () => {
      bus.$emit("setViewport")
    })
    // 添加DOM元素到地圖中
    map.getContainer().appendChild(div)
    // 將DOM元素返回
    return div
  }
}

export default MapInitControl

官方demo上用的是ES5的寫法，也就是用Function的方式來寫，我為了代碼統一用的是ES6的class寫法，反正都是為了繼承Control的原型方法
然后我并沒有在點擊事件中直接調用 map.setViewport()的方法，而是用Vue的bus直接emit了一個事件出去，主要也是為了業務考慮，主要是地圖上的點會一直變動，這樣可以在捕獲到事件的時候，再動態的計算地圖上的點

使用

// 添加一個自定義控件，返回地圖初始位置
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)
}

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

效果

云服務器 GPU云服務器自定義地圖自定義控件? 自定義控件自定義控件安卓

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104326.html

第三方庫

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

seanHai 2019-08-22 13:58 評論0 收藏0
第三方庫

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

gityuan 2019-08-29 14:17 評論0 收藏0
百度地圖使用

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

jay_tian 2019-08-22 15:01 評論0 收藏0
vue地圖可視化 ArcGIS篇（3）

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

oogh 2019-08-23 12:38 評論0 收藏0