Vue Baidu Map--自定义点图标bm-marker

自定义点图标
  1. 将准备好的图标放到项目中
  2. 使用import引入, 并在data中进行声明
javascript 复制代码
<script>
import mapIconRed from './vue-baidu-map/img/marker_red_sprite.png'
export default {
  data() {
        return {
        	mapIconRed,
      }
   },
}
</script>
  1. <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>
相关推荐
Amd79413 小时前
Nuxt.js 应用中的 webpack:compile 事件钩子
webpack·自定义·编译·nuxt.js·构建·钩子·逻辑
Amd7942 天前
Nuxt.js 应用中的 webpack:configResolved事件钩子
webpack·自定义·开发·配置·nuxt.js·构建·钩子
Amd7944 天前
Nuxt.js 应用中的 vite:compiled 事件钩子
自定义·vite·编译·nuxt·热更新·性能·钩子
Amd79410 天前
Nuxt.js 应用中的 schema:resolved 事件钩子详解
json·自定义·vite·配置·nuxt·schema·钩子
Amd79411 天前
Nuxt.js 应用中的 vite:extendConfig 事件钩子详解
自定义·开发·vite·配置·nuxt·构建·钩子
Amd79412 天前
Nuxt.js 应用中的 vite:extend 事件钩子详解
自定义·开发·vite·nuxt·插件·构建·钩子
Amd79412 天前
Nuxt.js 应用中的 schema:extend事件钩子详解
自定义·应用·nuxt·数据·扩展·验证·钩子
Amd79415 天前
Nuxt.js 应用中的 prepare:types 事件钩子详解
typescript·自定义·配置·nuxt·构建·钩子·类型
Amd79419 天前
Nuxt.js 应用中的 nitro:build:before 事件钩子详解
自定义·生命周期·配置·优化·nuxt·构建·钩子
Amd79420 天前
Nuxt.js 应用中的 nitro:init 事件钩子详解
自定义·交互·生命周期·nuxt·初始化·钩子·nitro