L未定义，使用传单

Question

我正在创建一个 Angular 应用程序，我希望它使用传单和 angular 显示地图，但是在实施时我遇到了错误：

ReferenceError: L is not defined

TypeScript 拥有我所有的地图实现

import { AfterViewInit, Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
    
import { HttpClient } from '@angular/common/http';
    
@Component({
  selector: 'app-moc-report',
  templateUrl: './moc-report.component.html',
  styleUrls: ['./moc-report.component.css'],
})
export class MocReportComponent implements OnInit, AfterViewInit 
{
     
   private map;
   private initMap(): void {

      this.map = L.map('map', {
         center: [10.536421, -61.311951],
         zoom: 8,
      });
    
      const tiles = L.tileLayer(
         'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         {
            maxZoom: 18,
            minZoom: 3,
            attribution:
              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
          }
      );
    
      tiles.addTo(this.map);
   }
    
    
   constructor(
      private router: Router,
      private fb: FormBuilder,
      private http: HttpClient
   ) { }
    
   ngAfterViewInit(): void {
      this.initMap();
      this.mapService.getMarkers(this.map);
   }
      
    
   onMapClick(e) {

      this.L.popup()
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " +  e.latlng.toString())
            .openOn(this.map);
   }
    
   this.map.on('click', this.onMapClick)
    
   ngOnInit(): void { }
}

我不太确定我做错了什么，因为这是第一次使用传单和 Angular。

Answer 1

你还缺少：

import * as L from 'leaflet';

Answer 2

您没有导入传单，请尝试这样的操作：

import * as L from 'leaflet'

L未定义，使用传单

L is not defined, using leaflet

leaflet

typescript

angular