自定义点图标
- 将准备好的图标放到项目中
- 使用import引入, 并在data中进行声明
javascript
<script>
import mapIconRed from './vue-baidu-map/img/marker_red_sprite.png'
export default {
data() {
return {
mapIconRed,
}
},
}
</script>
- 在
<bm-marker>
中加入参数icon,填入声明的图标和图标大小
html
<bm-marker :position="mapData.center"
:icon="{mapIconRed,size: {width: 20, height: 25}}">
</bm-marker>
实现效果:
完整代码:
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',//需要到百度地图官网申请ak
BMap:null,
map:null,
mapData: {
//中心坐标
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>