ОШИБКА TypeError: невозможно прочитать свойство 'topleft' неопределенного значения в ngx-leaflet и esri-leaflet-geocoder

Question

Я использую @asymmetrik/ngx-leaflet и @asymmetrik/ngx-leaflet-draw для карты листовок в моем проекте Angular 9. Я попробовал добавить опцию поиска на карте с помощью esri-leaflet-geocoder. без использования @asymmetrik/ngx-leaflet и @asymmetrik/ngx-leaflet-draw Я успешно разместил опцию поиска на карте без ошибок. это прекрасно работает. вот мой рабочий код:

/*npm install esri-leaflet esri-leaflet-geocoder*/
import * as L from 'leaflet';
import * as esriGeo from 'esri-leaflet-geocoder';

export class MapComponent implements OnInit {
  public searchControl = new esriGeo.Geosearch();
  
  ngOnInit() {
    this.initMap();        // not all codes are here;
    this.tiles.addTo(L.map);   // not all codes are here;
    
    this.searchControl.addTo(L.map);
  }
}

Выходные изображения:

Но когда Я пытаюсь реализовать тот же код, где ранее были выполнены @asymmetrik/ngx-leaflet и @asymmetrik/ngx-leaflet-draw, он говорит об ошибке: ERROR TypeError: Cannot read property 'topleft' of undefined. Ошибка выходного изображения:

Answer 1

Я только что решил проблему. Хотя я использую ngx-leaflet, поэтому здесь L.Map не является текущим экземпляром карты. ngx-leaflet инициализирует карту из LeafletDirective. так что рабочий код:

/*npm install esri-leaflet esri-leaflet-geocoder*/
import * as L from 'leaflet';
import * as esriGeo from 'esri-leaflet-geocoder';
import { LeafletDirective } from '@asymmetrik/ngx-leaflet'; //new import

export class MapComponent implements OnInit {
  public searchControl = new esriGeo.Geosearch();
  
  ngOnInit() {
    const map = this.leafletDirective.getMap(); // initialize map
    
    this.searchControl.addTo(map);
  }
}