ERROR TypeError.无法读取ngx-leaflet和esri-leaflet-geocoder上未定义的'topleft'属性。无法读取ngx-leaflet和esri-leaflet-geocoder上未定义的属性 "topleft"。

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);
  }
}