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