Vue3+vue3-leaflet自定义Marker图标不显示问题求助

我参考网上示例编写了以下极简代码，运行环境为Vue3 + vue3-leaflet库，但页面仅显示默认蓝色Marker，自定义图标未生效，请问遗漏了什么？

代码片段 #

HTML模板 #

<template>
  <LMap :zoom="14" :center="center">
     <LTileLayer url='url'/>
     <LMarker :latlng="center" :icon="defaultIcon"
  </LMap>
</template>

Script部分 #

import { LMap, LTileLayer, LMarker} from 'vue3-leaflet';
import largeCenterGoldMarker from '@/assets/images/icons/large_center_gold_marker.svg';

setup(){
    const defaultIcon = new L.Icon({
      iconUrl: largeCenterGoldMarker.src
    });
    return {defaultIcon};
  },
components: {
    LMap, LTileLayer, LMarker
  },

解决方法 #

• 补全未闭合的组件标签：模板中<LMarker>标签未闭合，会导致组件渲染异常，修正后：

  <LMarker :latlng="center" :icon="defaultIcon"></LMarker>
  

• 引入Leaflet核心样式：vue3-leaflet依赖Leaflet的CSS文件，未引入会导致图标样式异常，在main.js或当前组件中添加：

  import 'leaflet/dist/leaflet.css'
  

• 修正Icon路径配置：Vue中导入静态资源后，直接使用导入的变量作为iconUrl即可，无需.src，Vue会自动处理资源路径：

  const defaultIcon = new L.Icon({
    iconUrl: largeCenterGoldMarker
  });
  

• 补充Icon尺寸参数：SVG图标需要指定iconSize、iconAnchor等参数，否则可能因尺寸问题无法正常显示，根据图标实际尺寸调整：

  const defaultIcon = new L.Icon({
    iconUrl: largeCenterGoldMarker,
    iconSize: [40, 40], // 图标宽高
    iconAnchor: [20, 40], // 图标锚点（对应地图坐标的位置）
    popupAnchor: [0, -40] // 弹窗相对于图标的偏移（可选）
  });
  

内容的提问来源于stack exchange，提问作者Gen