Question

我遇到了与此处提到的相同的错误 Or C# if you feel so inclined。我是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>

更新

我尝试使用离子图标，但对我也不起作用。有了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);

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

1 个答案: