错误TypeError:无法读取ngx传单和esri-传单-地编码器上未定义的属性“topleft”

Question

我正在使用@asymmetrik/ngx-leaflet和@asymmetrik/ngx-leaflet-draw作为传单地图在我的角度9项目。我尝试了一个添加搜索选项在地图上‘esri-传单-地理编码器’。在没有使用@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);
  }
}

​