Vue Baidu Map之自定义点图标bm-marker的示例
作者：落千
这篇文章主要介绍了Vue Baidu Map之自定义点图标bm-marker,文中给大家介绍了vue-baidu-api地图标记点（自定义标记图标），设置标记点的优先级问题，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
Vue Baidu Map--自定义点图标bm-marker
自定义点图标
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',//需要到百度地图官网申请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>vue-baidu-api地图标记点（自定义标记图标），设置标记点的优先级
1：地图标记坐标点：使用自带的图标
<bm-marker
v-for="(item, index) in pathArr"
:key="index + '_'"
:position="item.value"
>
</bm-marker>
<script>
export default {
data(){
return{
zoom:14,
center:{},
pathArr:[
{value:{lng:30.122314,lat:121.0013123113}},
{value:{lng:30.23132113,lat:121.12414131}},
]
}
}
methods:{
//初始化地图
handler: function ({ BMap, map }) {
// 赋值，方便调用，本节被用到
this.BMap = BMap
this.map = map
var view = this.map.getViewport(eval(this.pathArr)) // this.pathArr 是我们知道的经纬度。可以有多个。全部以数组形式放在里面。
//进入显示的百分比
this.zoom = view.zoom;
//打开地图时的位置
this.center = view.center;
},
}
}
</script>2：地图自定义图标标记点：
使用z-index设计标记点的优先级，可以使优先级高的标记点不被覆盖，显示在最上面
<bm-marker
v-for="(item, index) in pathArr"
:key="index + '_'"
:position="item.value"
:z-index="200"
:icon="{ url: imgEndSrc, size: { width: 30, height: 35 } }"
>
</bm-marker>
<script>
export default {
data(){
return{
zoom:14,
imgEndSrc: require('@/assets/img/map/end.png'),
center:{},
pathArr:[
{value:{lng:30.122314,lat:121.0013123113}},
{value:{lng:30.23132113,lat:121.12414131}},
]
}
}
methods:{
//初始化地图
handler: function ({ BMap, map }) {
// 赋值，方便调用，本节被用到
this.BMap = BMap
this.map = map
var view = this.map.getViewport(eval(this.pathArr)) // this.pathArr 是我们知道的经纬度。可以有多个。全部以数组形式放在里面。
//进入显示的百分比
this.zoom = view.zoom;
//打开地图时的位置
this.center = view.center;
},
}
}
</script>到此这篇关于Vue Baidu Map--自定义点图标bm-marker的文章就介绍到这了,更多相关Vue 自定义点图标bm-marker内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！