Map.vue基于百度地圖組件重構(gòu)筆記分享
Map.vue是為iview組件開發(fā)的一個基于百度地圖的組件,實(shí)現(xiàn)了點(diǎn)是否在框內(nèi)的判斷,畫多邊形覆蓋物,添加自定義富文本標(biāo)記物等功能.
第一步:重構(gòu)自定義的富文本對象,設(shè)置為全局對象.
原代碼的富文本對象是聲明在addResource這個方法里面的,代碼結(jié)構(gòu)非常復(fù)雜,在beforeCreate這個鉤子函數(shù)里面申明為全局的,就可以多次復(fù)用,不需要重復(fù)聲明來了, 否則,每調(diào)用一次paintPolygon方法,都要重新聲明一次,非常麻煩,效率太低下.
原代碼是在父組件中處理好這個富文本對象需要的數(shù)據(jù),再把這些數(shù)據(jù)傳到富文本對象的構(gòu)造函數(shù)里面,重構(gòu)的處理方式,是將一整個數(shù)據(jù)對象(data對象)傳到對象的構(gòu)造函數(shù)里面,再根據(jù)需求,分解data對象來聲明對象的屬性(this._content | this._point | this._color等). 總結(jié)下來,數(shù)據(jù)總是應(yīng)該在最靠近 使用數(shù)據(jù)的地方 進(jìn)行處理.
window.ResOverlay = function(data, fun){
this._data = data
this._content = data['type'].name + "|" + data['name']
this._point = new BMap.Point(data.coord[0], data.coord[1])
this._fun = e => {
fun(data)
if(typeof(e.preventDefault()) == 'function'){
e.preventDefault() // IE下去除地圖點(diǎn)擊事件的冒泡
}else{
e.stopPropagation() // chrome下去除地圖點(diǎn)擊事件的冒泡
}
}
this._color = data['type'].color || "#5cadff" // 不同類型的資源有不同的顏色，默認(rèn)顏色為#5cadff。
}
第二步:函數(shù)傳遞
需要為富文本添加電腦端的click事件和移動端的touchstart事件.涉及到要操作父組件中的data數(shù)據(jù),所以采用將函數(shù)fun作為參數(shù)傳入
父組件請求回數(shù)據(jù)再做處理,rep.data.data.resources為data,fun就是 data => {}
this.$http.get('/api/search').then(rep => {
this.$refs.main.addResource(rep.data.data.resources, data => {
this.resourceName = data["name"]
this.resourceType = data["type"].name
this.resourceUpdata = data["uploader"]
this.resourcePosition = data["coord"]
console.log(data["attachment"])
let allList = []
data["attachment"].map(i => {
let tempList = []
tempList.push(i)
tempList.push(i.split("/")[i.split("/").length - 1])
allList.push(tempList)
})
this.resourceDetial = allList
// 為資源添加圖像
for(let i=0; i<data["images"].length; i++){
this.resourceImage.push(data["images"][i])
}
if (data["images"].length > 0){
this.isExistImage = true
}else{
this.isExistImage = false
}
// 為資源添加附件
if (data["attachment"].length > 0){
this.isExistAttach = true
}else{
this.isExistAttach = false
}
// 顯示模態(tài)框
this.modal1 = true
})
})
在構(gòu)造函數(shù)中,這樣子處理
this._fun = e => {
fun(data)
if(typeof(e.preventDefault()) == 'function'){
e.preventDefault() // IE下去除地圖點(diǎn)擊事件的冒泡
}else{
e.stopPropagation() // chrome下去除地圖點(diǎn)擊事件的冒泡
}
}
最后,在合適的位置,添加事件
wrapDiv.addEventListener("touchstart", this._fun);
wrapDiv.addEventListener("click", this._fun);
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 移動端適配方案詳解，詳細(xì)的介紹2種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
自帶氣泡提示的vue校驗(yàn)插件（vue-verify-pop）
這篇文章主要為大家詳細(xì)介紹了自帶氣泡提示的vue校驗(yàn)插件，vue-verify-pop的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了Vue-router中path的設(shè)置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue?el-date-picker?日期回顯后無法改變問題解決
這篇文章主要介紹了vue?el-date-picker?日期回顯后無法改變問題解決,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了element-ui upload組件多文件上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
基于vue+ bootstrap實(shí)現(xiàn)圖片上傳圖片展示功能
這篇文章主要介紹了基于vue+ bootstrap實(shí)現(xiàn)圖片上傳圖片展示功能,需要的朋友可以參考下2017-05-05
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
本文主要介紹了element關(guān)于table拖拽排序問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue實(shí)現(xiàn)添加與刪除圖書功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細(xì)介紹了如何在Vue項目中使用flv.js播放視頻,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04