Vue百度地圖maker標(biāo)注的添加和刪除方式
更新時(shí)間：2024年03月19日 15:13:18 作者：寧采不是臣
這篇文章主要介紹了Vue百度地圖maker標(biāo)注的添加和刪除方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue百度地圖maker標(biāo)注的添加和刪除
const lng = parseFloat(e.longitude)
const lat = parseFloat(e.latitude)
const point = new BMap.Point(lng, lat)
const marker = new BMap.Marker(point)
map.addOverlay(marker)
marker.setPosition(point)//添加標(biāo)注
//刪除標(biāo)注文檔上注明了是removeOverlay()這個(gè)方法，具體使用如下
marker.id = data[0].id//給marker添加id對(duì)應(yīng)數(shù)組里的id（非必要不要賦值id，不要這么寫）
const allOverlays = map.getOverlays()//返回地圖上所有的覆蓋物
//循環(huán)找到數(shù)組里面id和返回覆蓋物相同的
for (let i = 0; i < allOverlays.length; i++) {
if (allOverlays[i].id == data[0].id) { //data[0].id即是你要?jiǎng)h除標(biāo)注的id
map.removeOverlay(allOverlays[i])
}
}百度地圖API刪除指定的覆蓋物Marker
部分思路代碼
1.給地圖map添加覆蓋物Marker，注意給marker設(shè)定一個(gè)唯一表示，我這里用的是后端傳過來的id
const point = new BMap.Point(item.lng, item.lat) const marker = new BMap.Marker(point) marker.id = item.number this.map.addOverlay(marker)
2.根據(jù)getOverlays()方法獲取到地圖上所有的覆蓋物，并判斷覆蓋物的id是否和需要?jiǎng)h除的id一致，若一致則通過removeOverlay()刪除指定的覆蓋物
// 移除地圖覆蓋點(diǎn)
removeOverlay(lng, lat) {
const allOverlays = this.map.getOverlays()
for (let i = 0; i < allOverlays.length; i++) {
if (allOverlays[i].id && allOverlays[i].id === this.rowData.id) {
this.map.removeOverlay(allOverlays[i])
}
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中注冊(cè)全局組件的三種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實(shí)現(xiàn)基本
這篇文章主要介紹了Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實(shí)現(xiàn)基本的跨域請(qǐng)求封裝問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
這篇文章主要介紹了最新vue-cli 2.9.1的webpack存在問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
文章介紹了如何在Vue中通過Click方法獲取原事件的參數(shù),包括默認(rèn)參數(shù)、自定義參數(shù)以及如何同時(shí)獲取原生事件和自定義參數(shù)的方法2024-12-12
本文主要介紹Vue.js中監(jiān)聽器和計(jì)算屬性的相關(guān)知識(shí)點(diǎn)，包括對(duì)普通屬性的監(jiān)聽、對(duì)對(duì)象的監(jiān)聽、對(duì)數(shù)組的監(jiān)聽，以及計(jì)算屬性的Set方法，計(jì)算屬性與監(jiān)聽器的區(qū)別等等2021-05-05
Vue3時(shí)間軸組件問題記錄(時(shí)間信息收集組件)
本文介紹了如何在Vue3項(xiàng)目中封裝一個(gè)時(shí)間信息收集組件,采用雙向綁定響應(yīng)式數(shù)據(jù),通過對(duì)Element-Plus的Slider組件二次封裝,實(shí)現(xiàn)時(shí)間軸功能,解決了小數(shù)計(jì)算導(dǎo)致匹配問題和v-model綁定組件無效問題,感興趣的朋友跟隨小編一起看看吧2024-09-09
本文通過實(shí)例代碼給介紹了vue使用自定義組件實(shí)現(xiàn)通訊錄功能,需要的朋友可以參考下2018-09-09
本文主要介紹了淺談Vue?DIFF，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue子組件內(nèi)的props對(duì)象參數(shù)配置方法
這篇文章主要介紹了?Vue?子組件內(nèi)的??props?對(duì)象里的?default?參數(shù)是如何定義Array、?Object?、或?Function?默認(rèn)值的正確寫法說明，感興趣的朋友跟隨小編一起看看吧2022-08-08
vue3中$attrs的變化與inheritAttrs的使用詳解
$attrs現(xiàn)在包括class和style屬性。?也就是說在vue3中$listeners不存在了，vue2中$listeners是單獨(dú)存在的，在vue3?$attrs包括class和style屬性,?vue2中?$attrs?不包含class和style屬性，這篇文章主要介紹了vue3中$attrs的變化與inheritAttrs的使用?,需要的朋友可以參考下2022-10-10