自定義點(diǎn)圖標(biāo)
- 將準(zhǔn)備好的圖標(biāo)放到項(xiàng)目中
- 使用import引入， 并在data中進(jìn)行聲明
<script>
import mapIconRed from './vue-baidu-map/img/marker_red_sprite.png'
export default {
data() {
return {
mapIconRed,
}
},
}
</script>
- 在
<bm-marker>中加入?yún)?shù)icon，填入聲明的圖標(biāo)和圖標(biāo)大小
<bm-marker :position="mapData.center"
:icon="{mapIconRed,size: {width: 20, height: 25}}">
</bm-marker>
實(shí)現(xiàn)效果：
文章來源：http://www.zghlxwxcb.cn/news/detail-644982.html
完整代碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-644982.html
<template>
<div class="map-content" v-if="iscollegeRole">
<baidu-map class="bm-view map"
:ak="mapAK"
:scroll-wheel-zoom="true"
:center="mapData.center"
:zoom="mapData.zoom"
:continuous-zoom="true"
@ready="handler">
<bm-marker :position="mapData.center"
:icon="{mapIconRed,size: {width: 20, height: 25}}">
</bm-marker>
</baidu-map>
</div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import bmMarker from 'vue-baidu-map/components/overlays/Marker'
import mapIconRed from './components/vue-baidu-map/img/marker_red_sprite.png'
export default {
components: {BaiduMap,bmMarker ,bmLabel },
data() {
return {
mapAK: 'XXXXXXXXXXX',//需要到百度地圖官網(wǎng)申請ak
BMap:null,
map:null,
mapData: {
//中心坐標(biāo)
center: { lng: 113.33, lat: 39.01 },
//縮放級別,1~19
zoom: 19
},
labelStyle:{color: 'red', fontSize : '14px',fontWeight:'600'},
}
},
methods:{
handler ({BMap, map}) {
console.log(BMap, map)
this.BMap = BMap
this.map = map
}
},
}
</script>
<style scope>
.map {
width: 100%;
height: 400px;
}
</style>
到了這里，關(guān)于Vue Baidu Map--自定義點(diǎn)圖標(biāo)bm-marker的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
