javascript - Angular +传单+传单额外标记

Question

我正在使用 Leaflet 制作基于 net.core 3 和 Angular 8 的 SPA 网站。我想使用 Leaflet Extra Markers，但无法让这个东西发挥作用。

我使用 NPM 安装额外标记: https://www.npmjs.com/package/leaflet-extra-markers

npm 我传单额外标记

到目前为止一切顺利。我创建组件 - map.component.ts，下面是代码。只要我使用 Leaflet，一切都工作正常。但后来我尝试使用额外标记添加标记并得到

TypeError: Cannot read property 'icon' of undefined.

我想我错过了一些 super 简单的东西，但无法弄清楚。看起来 Extramarkers 没有扩展 Leaflet 类？我不知道为什么...

任何帮助将不胜感激。

import { AfterViewInit, Component } from '@angular/core';
import * as L from 'leaflet';
import { IMapObject } from '../models/map.model';

@Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
    private map;
    private mapObjects: IMapObject[] = [];

    constructor() { }

    ngAfterViewInit(): void {
        this.initMap();
    }

    private initMap(): void {
        this.map = L.map('map',
            {
                center: [52.246215, 21.223158],
                zoom: 18
            });

        const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            });

        tiles.addTo(this.map);

        this.createDummyMapObjects();

        this.mapObjects.map(o => {
            L.marker(o.position.latlon, { title: o.name, icon: greenIcon }).addTo(this.map).bindPopup(o.description);
        });

        // This is not working. Getting ERROR TypeError: Cannot read property 'icon' of undefined
        const redMarker = L.ExtraMarkers.icon({
            icon: 'fa-coffee',
            markerColor: 'red',
            shape: 'square',
            prefix: 'fa'
        });

        L.marker([51.941196, 4.512291], { icon: redMarker }).addTo(this.map);
    }

    private createDummyMapObjects(): void {

        const obj1: IMapObject = {
            id: 1,
            name: 'Test',
            category: 2,
            description: 'Test',
            position: {
                latlon: new Array(52.241103, 21.190475)
            }
        }

        const obj2: IMapObject = {
            id: 1,
            name: 'Test',
            category: 2,
            description: 'Test',
            position: {
                latlon: new Array(52.243149, 21.190883)
            }
        }

        this.mapObjects.push(obj1, obj2);
    }
}

编辑:我遵循建议并将脚本和 json 路径添加到 angular.json 文件。现在我得到:

Uncaught ReferenceError: L is not defined
    at leaflet.extra-markers.js:16
    at leaflet.extra-markers.js:13
    at leaflet.extra-markers.js:14

看起来像是导入问题？

Answer 1

根据documentation您需要在index.html中分别包含bootstrap版本3.3.7和font-awesome版本5.12.0

 <link
  rel="stylesheet"
  href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>

<!-- Font Awesome 5 SVG -->
<script
  defer
  src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"
></script>

确保将这些包含在 ts 中或将最后 2 个包含在 angular.json 中:

import "leaflet/dist/leaflet.css";
import * as L from "leaflet";
import "leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css";
import "leaflet-extra-markers/dist/js/leaflet.extra-markers.js";

Demo