Vue Baidu Map--自定义点图标bm-marker
自定义点图标
- 将准备好的图标放到项目中
- 使用import引入， 并在data中进行声明
<script>
import mapIconRed from './vue-baidu-map/img/marker_red_sprite.png'
export default {data() {return {mapIconRed,}},
}
</script>
- 在
<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>