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

Question

我的错误与这里提到的相同，Leaflet awesome marker plugin throwing icon not defined error。我是新来的Ionic，这是我第一次使用传单-可怕的标记。

我尝试过这个解决办法，但没有成功。

index.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);

任何帮助都将不胜感激。

Answer 1

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

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

更新

我试过用离子图标，但对我来说也不管用。与字体-太棒了，它的工作。

添加字体-可怕的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);