vue項(xiàng)目百度地圖如何自定義標(biāo)注marker
更新時(shí)間：2024年03月19日 09:57:55 作者：果真zZ
這篇文章主要介紹了vue項(xiàng)目百度地圖如何自定義標(biāo)注marker問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue百度地圖自定義標(biāo)注marker
1、向地圖中添加標(biāo)注
如下示例，向地圖中心點(diǎn)添加了一個(gè)標(biāo)注，并使用默認(rèn)的標(biāo)注樣式：
var point = new BMapGL.Point(116.404, 39.915); var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注 map.addOverlay(marker); // 將標(biāo)注添加到地圖中
2、向地圖中添加標(biāo)注
定義標(biāo)注圖標(biāo) 通過(guò)Icon類可實(shí)現(xiàn)自定義標(biāo)注的圖標(biāo)
重點(diǎn)：
vue項(xiàng)目中，以import的方式導(dǎo)入圖片文件?。?！
如：
import drugMarkerIcon from ‘@/assets/map/drug_mark_icon@2x.png' // 以import的方式導(dǎo)入圖片文件
var point = new BMapGL.Point(116.404, 39.915)
var myIcon = new BMapGL.Icon(drugMarkerIcon, new BMapGL.Size(28, 34))
var marker = new BMapGL.Marker(point, { icon: myIcon }) // 創(chuàng)建標(biāo)注
this.map.addOverlay(marker) // 將標(biāo)注添加到地圖中
marker.addEventListener('click', function () { //監(jiān)聽(tīng)標(biāo)注點(diǎn)擊事件
alert('您點(diǎn)擊了標(biāo)注')
})vue中Bmap百度地圖自定義帶標(biāo)簽的圖標(biāo)
效果如圖
直接上代碼吧
let point = new BMap.Point('經(jīng)度', '維度')
let mk = new BMap.Marker(point) // 創(chuàng)建一個(gè)圖像標(biāo)注實(shí)例，enableDragging：是否啟用拖拽，默認(rèn)為false, icon 自定義圖標(biāo)
var label = new BMap.Label(item.address, {
offset: new BMap.Size(0, 25),
});
mk.setLabel(label); // 為marker定義標(biāo)簽
this.map.addOverlay(mk) // 將覆蓋物添加到地圖中
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vuex的屬性和作用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
本篇文章主要介紹了vue之nextTick全面解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
vue elementUI Plus實(shí)現(xiàn)拖拽流程圖的詳細(xì)代碼(不引入插件)
文章介紹了如何使用Vue和elementUI Plus實(shí)現(xiàn)一個(gè)簡(jiǎn)單的拖拽流程圖功能,不引入任何插件,完全手寫,設(shè)計(jì)思路,感興趣的朋友跟隨小編一起看看吧2025-01-01
TinyMCE 是一款功能強(qiáng)大的富文本編輯器,廣泛應(yīng)用于各種 Web 應(yīng)用中,本文將詳細(xì)介紹如何在 Vue 項(xiàng)目中集成 TinyMCE,通過(guò)詳盡的步驟說(shuō)明、示例代碼展示以及豐富的配置選項(xiàng),助力開(kāi)發(fā)者輕松實(shí)現(xiàn)內(nèi)容編輯的增強(qiáng)與美化,需要的朋友可以參考下2024-11-11
C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)
下面小編就為大家分享一篇C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
vue實(shí)現(xiàn)可改變購(gòu)物數(shù)量的購(gòu)物車
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可改變購(gòu)物數(shù)量的購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
本篇文章主要介紹了vue.js組件之間傳遞數(shù)據(jù)的方法，組件實(shí)例的作用域是相互獨(dú)立的，如何傳遞數(shù)據(jù)也成了組件的重要知識(shí)點(diǎn)之一，有興趣的可以了解一下2017-07-07
Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理
本文主要介紹了Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
vue3 vue-draggable-next如何實(shí)現(xiàn)拖拽穿梭框效果
這篇文章主要介紹了vue3 vue-draggable-next如何實(shí)現(xiàn)拖拽穿梭框效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue+elementui實(shí)現(xiàn)動(dòng)態(tài)添加行/可編輯的table
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)動(dòng)態(tài)添加行/可編輯的table，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07