Vue2Leaflet 未在地图中放置自定义图标

问题描述

我尝试了几个例子，但结果是损坏的图像或默认图标

    <l-marker
      v-for="marker in getFilteredVehicles"
      :lat-lng="marker.latLng"
      :key="marker.rtoNo"
      @click="openVehicleStatus(marker)"
    >
    <l-icon
      :icon-size="[20,40]"
      :icon-anchor="[22,94]"
      icon-url="src/assets/icons/map-icons/d-green-car.png" >
    </l-icon>
   </l-marker>

即使我尝试在 L.icon() 中使用 l-marker 但它产生了损坏的图像

模板

    <l-marker
      v-for="marker in getVehicles"
      :lat-lng="marker.latLng"
      :key="marker.rtoNo"
      :icon="getIcon()"
      @click="openVehicleStatus(marker)"
    >

脚本

getIcon() {
  return L.icon({ 
    iconUrl: "src/assets/icons/map-icons/d-green-car.png",shadowUrl: "src/assets/icons/map-icons/d-green-car.png",iconSize:     [38,95],// size of the icon
    shadowSize:   [50,64],// size of the shadow
    iconAnchor:   [22,94],// point of the icon which will correspond to marker's location
    shadowAnchor: [4,62],// the same for the shadow
    popupAnchor:  [-3,-76] // point from which the po
  });
}

解决方法

以下代码对我有用。

<l-marker
  v-for="marker in getFilteredVehicles"
  :lat-lng="marker.latLng"
  :key="marker.rtoNo"
  @click="openVehicleStatus(marker)"
>
    <l-icon
        :icon-size="[40,40]"
        :icon-anchor="[22,94]"
        icon-url="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/map-marker-icon.png"
    />
</l-marker>

并请检查您是否正确导入了LIcon，如下所示。

import {LIcon} from "vue2-leaflet";

export default {
    components: {
        LIcon
    }
}