代码之家 › 专栏 › 技术社区 › Maihan Nijat

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

esri-leaflet leaflet angular javascript

1

Maihan Nijat · 技术社区 · 7 年前

我正在使用 leaflet.js ngx-leaflet esri-leaflet-geocoder 包装。

我能够使用纯JavaScript在传单地图上的搜索框。我只需要下面这句话:

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

但我无法用角度来完成这一点。我尝试了以下方法:

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,结果是相同的。

1 回复 | 直到 7 年前

1

0

Maihan Nijat 7 年前

一个不确定是否是最佳解决方案的变通方法。

导入插件的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>

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