如何使用 Angular 2 在传单地图上添加搜索控件？

Question

我正在使用 leaflet.js with ngx-leaflet and esri-leaflet-geocoder 个软件包。

我可以在传单地图上使用简单的搜索框 JavaScript。我只需要以下行：

var searchControl = L.esri.Geocoding.geosearch().addTo(mymap);

但我无法在 Angular 中完成此操作。我尝试了以下方法：

layers = [];
searchControl = Geocoding.geosearch();
this.layers.push(this.searchControl); // in the constructor

HTML:

<div style="height: 300px;"
     leaflet
     [leafletOptions]="options"
     [leafletLayersControl]="layersControl"
     [leafletLayers]="layers"
     [leafletFitBounds]="this.polygon.getBounds()"
     (leafletClick)="mapClicked($event)">
</div>

我收到错误消息：

ERROR Error: "The provided object is not a Layer."

我安慰了searchControl，普通JavaScript和Angular的结果是一样的。

Answer 1

不确定是否是最佳解决方案的解决方法。

插件的导入CSS：

import 'style-loader!esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css';

地图准备就绪时传递地图对象：

<div style="height: 300px;"
     leaflet
     [leafletOptions]="options"
     [leafletLayersControl]="layersControl"
     [leafletLayers]="layers"
     [leafletFitBounds]="polygon.getBounds()"
     (leafletClick)="mapClicked($event)"
     (leafletMapReady)="onMapReady($event)">>
</div>

并像普通一样将控制器添加到地图 JavaScript:

onMapReady(map: L.Map) {
  setTimeout(() => {
    map.invalidateSize(true);
    this.searchControl.addTo(map);
  }, 0);
}

如何使用 Angular 2 在传单地图上添加搜索控件？

How to add search control on leaflet map using Angular 2?

javascript

leaflet

esri-leaflet

angular