如何使用Angular 2在傳單地圖上添加搜索控件？

Question

我正在將leaflet.js與ngx-leaflet和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>

我收到錯誤提示：

錯誤錯誤：“提供的對象不是圖層。”

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