Leaflet Awesome Markers报Cannot read property 'icon' of undefined错误求助

我之前刚处理过一模一样的问题，看你的代码配置，核心问题应该是缺少了leaflet.awesome-markers的JS文件引入，另外还可能缺了Font Awesome的依赖——这俩都是Awesome Markers正常工作的必要条件！

问题分析 #

从你的index.html代码来看，你只引入了Leaflet的CSS/JS和Awesome Markers的CSS，但没有加载对应的Awesome Markers JavaScript文件。没有这个JS，Leaflet的L对象就不会被扩展出AwesomeMarkers这个属性，自然会抛出"icon未定义"的错误。另外你用了coffee这个图标，它依赖Font Awesome字体库，没引入的话图标也显示不出来。

具体修复步骤 #

1. 添加Awesome Markers JS文件
   先把leaflet.awesome-markers.js文件放到你的assets/leaflet目录下（和CSS文件同路径），如果没有这个文件，去下载和你Leaflet 1.6.0兼容的版本（推荐v2.0.4，适配性较好）。然后在index.html里Leaflet JS的后面加上这个引入：

   <script src="assets/leaflet/leaflet.awesome-markers.js"></script>
   

2. 引入Font Awesome CSS
   因为你用到了coffee这类Font Awesome图标，需要在index.html里添加Font Awesome的样式文件：

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   

3. 检查文件路径与资源配置（Ionic专属）
   打开你的angular.json文件，确认assets配置里包含了leaflet目录的文件，确保Ionic能正确访问到这些资源：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/assets/leaflet/*" // 确保这行存在，或者直接包含整个assets目录
   ]
   

修改后的完整index.html片段 #

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<!-- 引入Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<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>
<!-- 新增Awesome Markers JS引入 -->
<script src="assets/leaflet/leaflet.awesome-markers.js"></script>

做完这些修改后，重启你的Ionic项目，应该就能正常创建Awesome Marker了！如果还是有问题，打开浏览器开发者工具的Network标签，检查所有引入的CSS/JS文件有没有404错误，路径是否正确。

内容的提问来源于stack exchange，提问作者kathryn