Vue?Baidu?Map之自定義點圖標bm-marker的示例

更新時間：2023年08月11日 10:15:27 作者：落千

這篇文章主要介紹了Vue?Baidu?Map之自定義點圖標bm-marker,文中給大家介紹了vue-baidu-api地圖標記點（自定義標記圖標），設置標記點的優(yōu)先級問題，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

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>中加入?yún)?shù)icon，填入聲明的圖標和圖標大小

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

實現(xiàn)效果：

完整代碼：

<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: {
            //中心坐標
            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地圖標記點（自定義標記圖標），設置標記點的優(yōu)先級

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 }) {
		  // 賦值，方便調用，本節(jié)被用到
		  this.BMap = BMap
		  this.map = map
		  var view = this.map.getViewport(eval(this.pathArr))  // this.pathArr 是我們知道的經(jīng)緯度。可以有多個。全部以數(shù)組形式放在里面。
            //進入顯示的百分比
            this.zoom = view.zoom;
            //打開地圖時的位置
            this.center = view.center;
		},
	}
}
</script>

2：地圖自定義圖標標記點：

使用z-index設計標記點的優(yōu)先級，可以使優(yōu)先級高的標記點不被覆蓋，顯示在最上面

<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 }) {
		  // 賦值，方便調用，本節(jié)被用到
		  this.BMap = BMap
		  this.map = map
		  var view = this.map.getViewport(eval(this.pathArr))  // this.pathArr 是我們知道的經(jīng)緯度。可以有多個。全部以數(shù)組形式放在里面。
            //進入顯示的百分比
            this.zoom = view.zoom;
            //打開地圖時的位置
            this.center = view.center;
		},
	}
}
</script>

到此這篇關于Vue Baidu Map--自定義點圖標bm-marker的文章就介紹到這了,更多相關Vue 自定義點圖標bm-marker內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: