Vue2Leaflet不会在地图中放置自定义图标

npm install vue2-leaflet leaflet

<script>
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  // ...
}
</script>

<template>
  <div>
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer>
      <l-marker :lat-lng="markerLatLng"></l-marker>
    </l-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 13,
      center: [51.505, -0.09], // 地图中心点经纬度
      markerLatLng: [51.505, -0.09] // 标记点经纬度
    };
  },
  // ...
}
</script>

<template>
  <div>
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer>
      <l-marker :lat-lng="markerLatLng" :icon="customIcon"></l-marker>
    </l-map>
  </div>
</template>

<script>
import L from 'leaflet';

export default {
  data() {
    return {
      zoom: 13,
      center: [51.505, -0.09], // 地图中心点经纬度
      markerLatLng: [51.505, -0.09], // 标记点经纬度
      customIcon: L.icon({
        iconUrl: 'path/to/custom-icon.png',
        iconSize: [32, 32], // 图标大小
        iconAnchor: [16, 16], // 图标锚点位置
        popupAnchor: [0, -16] // 弹出窗口位置
      })
    };
  },
  // ...
}
</script>