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

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

esri-leaflet leaflet angular javascript

Maihan Nijat · 技术社区 · 6 年前

我正在使用 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 回复 | 直到 6 年前

Maihan Nijat 6 年前

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

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

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

Jihed Ben Zarb · 造型角材料日期选择器

6 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前