错误类型错误：无法读取 ngx-leaflet 和 esri-leaflet-geocoder 上未定义的属性“topleft”答案

【问题标题】：ERROR TypeError: Cannot read property 'topleft' of undefined on ngx-leaflet and esri-leaflet-geocoder错误类型错误：无法读取 ngx-leaflet 和 esri-leaflet-geocoder 上未定义的属性“topleft”
【发布时间】：2023-03-18 13:31:01
【问题描述】：

我在我的 Angular 9 项目中使用 @asymmetrik/ngx-leaflet 和 @asymmetrik/ngx-leaflet-draw 作为传单地图。我尝试通过“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。 错误输出图片：

【问题讨论】：

L.map 不是地图的实例。它是对地图构造函数的引用。使用 ngx-leaflet 并按照说明创建和配置地图。然后，按照说明获取对地图的引用，创建控件并将其添加到对地图的引用中。

标签： angular leaflet geocoding esri ngx-leaflet

【解决方案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);
  }
}

【讨论】：