时间戳

首页 > 解决方案 > 无法读取未定义的属性“图标”

ionic-framework - 无法读取未定义的属性“图标”

问题描述

我遇到了与此处提到的相同的错误 Leaflet awesome marker plugin throwing icon not defined error。我是 Ionic 的新手，这是我第一次使用 Leafet-awesome 标记。

我试过这个解决方案没有成功。

索引.html：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin="" />

  <link rel="stylesheet" href="assets/leaflet/leaflet.awesome-markers.css">

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>

page.ts：

var redMarker = L.AwesomeMarkers.icon({
      icon: 'coffee',
      markerColor: 'red'
    });

    L.marker([this.lat, this.lng], {icon: redMarker}).addTo(this.map);

任何帮助，将不胜感激。

标签： ionic-frameworkleafletfont-awesome

解决方案

您必须leaflet.awesome-markers.js在html中添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.0/leaflet.awesome-markers.min.js"></script>

更新

我尝试使用离子图标，但它也不适合我。使用 Font-Awesome 它可以工作。

添加 font-awesome css：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />

和

var redMarker = L.AwesomeMarkers.icon({
      icon: 'coffee',
      markerColor: 'red',
      prefix: 'fa'
    });

    L.marker([this.lat, this.lng], {icon: redMarker}).addTo(this.map);

推荐阅读