自定義點圖標

1. 將準備好的圖標放到項目中
   
2. 使用import引入， 并在data中進行聲明

<script>
import mapIconRed from './vue-baidu-map/img/marker_red_sprite.png'
export default {data() {return {mapIconRed,}},
}
</script>

3. 在<bm-marker>中加入參數icon，填入聲明的圖標和圖標大小

<bm-marker :position="mapData.center":icon="{mapIconRed,size: {width: 20, height: 25}}">
</bm-marker>

實現效果：

---

完整代碼：

<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',//需要到百度地圖官網申請akBMap:null,map:null,mapData: {//中心坐標center: { lng: 113.33, lat: 39.01 },//縮放級別,1~19zoom: 19},labelStyle:{color: 'red', fontSize : '14px',fontWeight:'600'},}},methods:{handler ({BMap, map}) {console.log(BMap, map)this.BMap = BMapthis.map = map}},
}
</script><style scope>
.map {width: 100%;height: 400px;
}
</style>