資訊專欄INFORMATION COLUMN
摘要：百度地圖自定義控件百度地圖的原生控件已經(jīng)很多了，但總會(huì)有些時(shí)候我們需要自己寫個(gè)控件來實(shí)現(xiàn)某些功能自定義控件的實(shí)現(xiàn)原理看了百度地圖的文檔發(fā)現(xiàn)實(shí)現(xiàn)自定義控件的原理也不復(fù)雜自己創(chuàng)建一個(gè)控件類繼承百度地圖的類的原型將要實(shí)現(xiàn)功能的邏輯寫在原型的方法中
百度地圖自定義控件
百度地圖的原生控件已經(jīng)很多了，但總會(huì)有些時(shí)候我們需要自己寫個(gè)控件來實(shí)現(xiàn)某些功能自定義控件的實(shí)現(xiàn)原理
看了百度地圖的文檔發(fā)現(xiàn)實(shí)現(xiàn)自定義控件的原理也不復(fù)雜代碼
1、 自己創(chuàng)建一個(gè)控件類繼承百度地圖的Control類的原型
2、 將要實(shí)現(xiàn)功能的邏輯寫在原型的initialize()方法中
3、 實(shí)例化我們創(chuàng)建的控件類
4、 把實(shí)例化的控件掛載到地圖實(shí)例上
自己來實(shí)現(xiàn)一個(gè)回到初始位置的地圖控件
創(chuàng)建一個(gè)自己的控件類
import BMap from "BMap"
import bus from "../bus/bus"
class MapInitControl extends BMap.Control {
constructor (option) {
super()
// 默認(rèn)?？课恢煤推屏? // 也可以由傳入的參數(shù)控制
this.defaultAnchor = option.anchor || BMAP_ANCHOR_TOP_RIGHT
this.defaultOffset = option.offset || new BMap.Size(20, 20)
// 自定義參數(shù)
// .....
}
initialize (map) {
// 這個(gè)初始化方法需要傳入map，但事實(shí)上使用時(shí)沒有手動(dòng)調(diào)用initialize方法，也就沒有傳入map地圖實(shí)例
// 在添加這個(gè)控件實(shí)例到地圖上時(shí)，自動(dòng)調(diào)用初始化方法，然后傳入了當(dāng)前的地圖實(shí)例
// 使用一個(gè)自己不需要手動(dòng)傳入的參數(shù)還是感覺有那么一點(diǎn)怪異
// console.log(map)
const div = document.createElement("div")
// 添加文字說明
div.appendChild(document.createTextNode("初始位置"));
// 設(shè)置樣式
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)聽點(diǎ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ǎn)擊事件中直接調(diào)用 map.setViewport()的方法，而是用Vue的bus直接emit了一個(gè)事件出去，主要也是為了業(yè)務(wù)考慮，主要是地圖上的點(diǎn)會(huì)一直變動(dòng)，這樣可以在捕獲到事件的時(shí)候，再動(dòng)態(tài)的計(jì)算地圖上的點(diǎn)
// 添加一個(gè)自定義控件，返回地圖初始位置
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ā)回到中心點(diǎn)事件
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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104326.html
摘要：項(xiàng)目已放到上在線預(yù)覽效果截圖添加點(diǎn)圖標(biāo)經(jīng)緯度圖標(biāo)和后臺(tái)獲取之后的點(diǎn)定位點(diǎn)的經(jīng)緯度獲取數(shù)據(jù)點(diǎn)擊之后圖標(biāo)和報(bào)修圖標(biāo)配置信息跳轉(zhuǎn)鏈接循環(huán)添加多個(gè)點(diǎn)圖標(biāo)定位點(diǎn)的經(jīng)緯度獲取的數(shù)據(jù)圖標(biāo)的和點(diǎn)擊之后圖標(biāo)和，報(bào)修圖標(biāo)配置百度地圖創(chuàng)建 項(xiàng)目已放到github上 在線預(yù)覽 showImg(https://segmentfault.com/img/bV4OmH?w=280&h=280); 效果截圖 show...
摘要：不建議底圖選擇中存在兩種不同坐標(biāo)體系，如下圖坐標(biāo)存在明顯的偏差，火星坐標(biāo)在采用坐標(biāo)系的地圖上位置偏上彩色中國(guó)天地圖全球衛(wèi)星地圖例如我們使用的類進(jìn)行查找，返回的數(shù)據(jù)都是國(guó)際坐標(biāo)，因此必須進(jìn)行偏差糾正。 ArcGIS for javascript開發(fā)心得 本次實(shí)例中采用ArcGIS for javascript3.24版本，由于版本3與4在API等存在較大區(qū)別，就不一一列舉，詳細(xì)區(qū)別看官方...
閱讀 1996·2021-11-24 09:39
閱讀 989·2021-11-11 16:55
閱讀 1443·2021-10-09 09:43
閱讀 1431·2021-10-08 10:17
閱讀 1664·2021-08-25 09:41
閱讀 436·2019-08-30 13:02
閱讀 637·2019-08-29 15:14
閱讀 1014·2019-08-29 13:53
