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類(lèi)可實(shí)現(xiàn)自定義標(biāo)注的圖標(biāo)
重點(diǎn)：
vue項(xiàng)目中，以import的方式導(dǎo)入圖片文件?。。?/p>
如：
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)文章
vue項(xiàng)目啟動(dòng)時(shí)無(wú)法識(shí)別es6的擴(kuò)展語(yǔ)法的解決
啟動(dòng)項(xiàng)目時(shí)遇到ES6的拓展運(yùn)算符報(bào)錯(cuò)可以通過(guò)切換到淘寶鏡像,以及在項(xiàng)目根目錄下新增.babelrc和postcss.config.js文件來(lái)解決,這些操作有助于正確配置項(xiàng)目環(huán)境,從而避免報(bào)錯(cuò),并保證項(xiàng)目的順利運(yùn)行,希望這些經(jīng)驗(yàn)?zāi)軌驇椭接龅较嗤瑔?wèn)題的開(kāi)發(fā)者2024-10-10
vuex actions異步修改狀態(tài)的實(shí)例詳解
今天小編就為大家分享一篇vuex actions異步修改狀態(tài)的實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法
這篇文章主要介紹了使用Vue-axios進(jìn)行數(shù)據(jù)交互詳情，文章圍繞Vue-axios進(jìn)行數(shù)據(jù)交互的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)或工作有所幫助2022-03-03
vue組件 keep-alive 和 transition 使用詳解
這篇文章主要介紹了vue組件 keep-alive 和 transition 使用詳解,需要的朋友可以參考下2019-10-10
vue在取對(duì)象長(zhǎng)度length時(shí)候出現(xiàn)undefined的解決
這篇文章主要介紹了vue在取對(duì)象長(zhǎng)度length時(shí)候出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中filter的應(yīng)用場(chǎng)景詳解
這篇文章主要為大家介紹了vue中filter的應(yīng)用場(chǎng)景，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
element使用自定義icon圖標(biāo)的詳細(xì)步驟
前端經(jīng)常會(huì)用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫(kù),下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法
Vite項(xiàng)目中我們可以手動(dòng)將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2023-04-04
vue下history模式刷新后404錯(cuò)誤解決方法
這篇文章主要介紹了vue下history模式刷新后404錯(cuò)誤解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08