Angular集成Leaflet为何生成多个地图实例？

我用以下极简代码实现Leaflet地图（仅包含MapComponent和AppComponent），严格遵循Leaflet教程，但出现了Leaflet生成多个地图实例的问题，附上问题截图：

MapComponent代码 #

import { Component } from '@angular/core';
import L from 'leaflet';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-map',
  standalone: true,
  imports: [],
  templateUrl: './map.component.html',
  styleUrl: './map.component.css'
})
export class MapComponent {
  private index = 0;
  constructor() {
  }

  ngOnInit(){
    var map = L.map('map').setView([51.505, -0.09], 13);

    this.index++;
    console.log(this.index)
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
  }
}

AppComponent代码 #

import { Component } from '@angular/core';
import {RouterModule} from '@angular/router';

import { MapComponent } from './map/map.component';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import L from 'leaflet';

@Component({
  
  selector: 'app-root',
  standalone: true,
  imports: [MapComponent, RouterModule],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
        </header>
      </a>
      <section class="content">
        <router-outlet></router-outlet>
      </section>
    </main>`
  ,
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'homes';

  constructor(){

  }

  ngOnInit() {
  //console.log(this.http.get<any>(this.apiUrl));
  }
}

问题原因及解决办法 #

1. 核心原因：

   • 直接在ngOnInit里通过L.map('map')创建实例，既没判断容器是否已有地图，也没在组件销毁时清理实例，一旦组件被重复初始化（比如路由切换、重复渲染），就会生成多个地图。
   • 同时AppComponent的imports引入了MapComponent，若路由也配置加载该组件，会导致组件被多次渲染。

2. 修复步骤：

   • 保存地图实例并在销毁时清理：
     修改MapComponent，实现OnDestroy钩子，在组件销毁时移除地图实例：

     import { Component, OnInit, OnDestroy } from '@angular/core';
     import L from 'leaflet';
     
     @Component({
       selector: 'app-map',
       standalone: true,
       imports: [],
       templateUrl: './map.component.html',
       styleUrl: './map.component.css'
     })
     export class MapComponent implements OnInit, OnDestroy {
       private index = 0;
       private map: L.Map | null = null;
     
       constructor() {}
     
       ngOnInit(){
         const mapContainer = document.getElementById('map');
         // 避免重复创建地图
         if (mapContainer && !this.map) {
           this.map = L.map('map').setView([51.505, -0.09], 13);
           this.index++;
           console.log(this.index);
           L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
           }).addTo(this.map);
         }
       }
     
       ngOnDestroy() {
         // 销毁地图释放资源
         if (this.map) {
           this.map.remove();
           this.map = null;
         }
       }
     }
     

   • 调整组件渲染逻辑：
     确保MapComponent只被渲染一次——要么通过路由在router-outlet加载，要么直接在AppComponent模板中引用，不要同时操作。比如路由已配置加载该组件，就从AppComponent的imports里移除MapComponent，模板中也不要用<app-map>标签。

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