【发布时间】：2022-11-22 23:15:39
【问题描述】：
我正在进行一个使用 Leaflet.JS 地图插件的小型演示，但似乎无法使用 Leaflet.Extra-Markers 插件显示标记。我见过类似的问题here，但他们使用的是 Angular，他们使用 NPM 下载项目，这是我不想做的。
这是我的 index.html 标题中的额外标记的代码：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.12.0/css/all.min.css" />
<link rel="stylesheet" href="layout/leaflet.extra-markers.min.css">
<script src="libs/leaflet.extra-markers.min.js"></script>
这只是您的标准 HTML、CSS 和 JS 文件结构，我在其中将“布局”和“libs”文件夹中的样式和脚本与 index.html 文件所在根目录下的“img”文件分开。 我已经在使用 Marker Cluster 插件来显示一些机场位置，但这应该不会与之冲突吧？ 我正在使用 documentation 中的演示代码，这就是全部内容： screenshot
这是代码：
var redMarker = L.ExtraMarkers.icon({
icon: 'fa-coffee',
markerColor: 'red',
shape: 'square',
prefix: 'fa'
});
L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);
我希望标记显示在所需位置，该位置使用 fontawesome 库通过 Leaflet Extra Markers 提供的“fa-coffee”图标。
【问题讨论】：
-
提供调试链接。似乎只有标记的阴影表明它无法加载 fontawesome。您的站点中是否集成了 fontawesome？
-
是的，当我使用像“<i class="fa-solid fa-plane"></i>”这样的 fontawesome 图标时，我放在标题中的链接似乎有效并且它确实出现在页面中
标签： javascript html leaflet