Angular + Leaflet + Leaflet AwesomeMarkers - “无法读取未定义的属性‘图标’”答案

【问题标题】：Angular + Leaflet + Leaflet AwesomeMarkers - "Cannot read property 'icon' of undefined"Angular + Leaflet + Leaflet AwesomeMarkers - “无法读取未定义的属性‘图标’”
【发布时间】：2021-02-24 22:58:40
【问题描述】：

我试图在我的 Angular10 项目中使用 leaflet Awesome Markers 在我的标准传单标记中使用字体真棒图标。但是，我在尝试创建 L.AwesomeMarker 时遇到以下错误。

同时，在使用 ng serve 或在 VScode 编译期间，我没有收到任何导入错误或类似错误。导致错误的代码：

// leaflet-map.component.ts
import * as L from "node_modules/leaflet";
import * as awesome from "node_modules/leaflet.awesome-markers";

...

export class LeafletMapComponent implements OnInit, OnDestroy, AfterViewInit{

...
  createDefaultMarker(mapMarker: MapMarker): Marker{
    const awesomeIcon = this.fontAwesomeIcon(mapMarker.icon, mapMarker.color);

    return L.marker([mapMarker.latitude, mapMarker.longitude], {icon: awesomeIcon})
      .bindPopup(this.getPopupText(mapMarker))
      .bindTooltip(mapMarker.location_details.name);
  }

  fontAwesomeIcon(){
    return L.AwesomeMarkers.icon({ //This is leaflet-map.component.ts:70
      icon: 'diamond',
      markerColor: 'blue'
    })
  }

它们肯定至少在项目中，因为它们在我的package.json 文件中的“依赖项”下列出。 Leaflet 本身已经可以工作了，只是这个插件导致了问题。

我不完全确定这里出了什么问题，所以我已经尝试了以下方法：

在我的项目的index.html 中直接包含leaflet 和leaflet-awesome-marker js 和css。
从各种不同的文件夹中导入传单和传单真棒标记
在我的 angular.json 文件中包含传单和传单真棒标记 js 和 css
使用import * as L from "node_modules/leaflet.awesome-markers" 导入很棒的标记而不导入传单

它没有改变错误，可能是因为它没有解决我在leaflet-map.copmonent.ts 打字稿中错误地导入某些内容的问题。我需要解决什么问题？

【问题讨论】：

标签： javascript angular configuration leaflet

【解决方案1】：

可能发生的情况是 Leaflet.awesome-markers 脚本实际上没有被导入/是从你的应用程序中摇出的，因为构建引擎看到你没有使用声明的导入。

所以而不是：

import * as awesome from "node_modules/leaflet.awesome-markers";

你可以试试：

import "node_modules/leaflet.awesome-markers";

通过不声明要导入的任何特定内容，您请求无条件导入脚本并避免任何摇树优化。

这个插件只执行在全局L上添加AwesomeMarkers键的副作用，所以除了运行它之外没有什么特定的导入。

【讨论】：

这是一个非常公平的建议，希望遇到相同问题的任何人都可以尝试一下！可悲的是，与此同时，项目发生了足够大的变化，以至于我实际上无法再重现发生这种情况的情况。我得到的只是消失的标记，我记得以前没有发生过。可能是某些资源的加载方式与以前不同。

【解决方案2】：

我已经放弃自己解决这类问题。相反，我选择了另一种方法，基于this tutorial. 编写一些自定义 CSS 类和一点 HTML。我将 CSS 类 1:1 放入 styles.css 文件中

styles.scss

.marker-pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #c30b82;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -15px 0 0 -15px;
}
// to draw white circle
.marker-pin::after {
    content: '';
    width: 24px;
    height: 24px;
    margin: 3px 0 0 3px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
 }

// to align icon
.custom-div-icon i {
   position: absolute;
   width: 22px;
   font-size: 22px;
   left: 0;
   right: 0;
   margin: 10px auto;
   text-align: center;
}

mapmarker.ts + Leaflet-map.component.ts

  //mapmarker.ts
export interface MapMarker{
    color?: string,
    icon?: string,
    latitude: number,
    longitude: number,
}

  //leaflet-map.component.ts
  createAwesomeMarker(mapMarker: MapMarker): Marker{
    return L.marker(
      [mapMarker.latitude, mapMarker.longitude], 
      {icon: this.divIcon(mapMarker.color, mapMarker.icon)}
    );
  }

  divIcon(icon: string, color: string){
    const markerIcon = L.divIcon({
      className: 'custom-div-icon',
      html: `<div style='background-color:${color};' class='marker-pin'></div><i class='fa fa-${icon} awesome'>`,
      iconSize: [30, 42],
      iconAnchor: [15, 42],
      color: color
    });

    return markerIcon;
  }

【讨论】：