vue項目百度地圖如何自定義標(biāo)注marker
更新時間：2024年03月19日 09:57:55 作者：果真zZ
這篇文章主要介紹了vue項目百度地圖如何自定義標(biāo)注marker問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue百度地圖自定義標(biāo)注marker
1、向地圖中添加標(biāo)注
如下示例，向地圖中心點添加了一個標(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) 通過Icon類可實現(xiàn)自定義標(biāo)注的圖標(biāo)
重點：
vue項目中，以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)聽標(biāo)注點擊事件
alert('您點擊了標(biāo)注')
})vue中Bmap百度地圖自定義帶標(biāo)簽的圖標(biāo)
效果如圖
直接上代碼吧
let point = new BMap.Point('經(jīng)度', '維度')
let mk = new BMap.Marker(point) // 創(chuàng)建一個圖像標(biāo)注實例，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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
啟動項目時遇到ES6的拓展運算符報錯可以通過切換到淘寶鏡像,以及在項目根目錄下新增.babelrc和postcss.config.js文件來解決,這些操作有助于正確配置項目環(huán)境,從而避免報錯,并保證項目的順利運行,希望這些經(jīng)驗?zāi)軌驇椭接龅较嗤瑔栴}的開發(fā)者2024-10-10
今天小編就為大家分享一篇vuex actions異步修改狀態(tài)的實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法
這篇文章主要介紹了使用Vue-axios進(jìn)行數(shù)據(jù)交互詳情，文章圍繞Vue-axios進(jìn)行數(shù)據(jù)交互的相關(guān)資料展開詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)或工作有所幫助2022-03-03
vue組件 keep-alive 和 transition 使用詳解
這篇文章主要介紹了vue組件 keep-alive 和 transition 使用詳解,需要的朋友可以參考下2019-10-10
vue在取對象長度length時候出現(xiàn)undefined的解決
這篇文章主要介紹了vue在取對象長度length時候出現(xiàn)undefined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家介紹了vue中filter的應(yīng)用場景，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
element使用自定義icon圖標(biāo)的詳細(xì)步驟
前端經(jīng)常會用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue2.0 + ele的循環(huán)表單及驗證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗證字段方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vite項目中我們可以手動將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡單實現(xiàn)方法,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue下history模式刷新后404錯誤解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08