如何解决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
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。