vue.js - Vue2Leaflet 没有在地图中放置自定义图标

Question

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

    <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()inl-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
  });
}

Answer 1

以下代码对我有用。

<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
    }
}