用于地理编码的ArcGIS自定义搜索输入

问题描述

在一个（由JHipster生成的）Angular项目中，我想使用ArcGIS geocode REST API对地址字符串进行地址解析，并在结果上进行预输入选择。

ArcGIS已使用Javascript / Angular库实现地址search。它具有一个如下所示的搜索小部件：

但是我的项目表单正在使用ng-bootstrap输入。为了保持一致的外观，我想在我自己的typeahead地理编码实现中使用ng-bootstrap typeahead输入。（除非有一种为小部件设置样式的方法-每个this答案）

在stackblitz中，我实现了将typeahead输入与一系列示例地址一起使用，但无法理解如何将其连接到ArcGIS REST API结果。

export class AppComponent {
  private static ROOT_URL = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest";

  readonly name = "Angular";
  readonly locations$: Observable<ReadonlyArray<Location>>;

  constructor(private readonly httpClient: HttpClient) {
    this.locations$ = this.getLocations();
  }

  private getLocations(): Observable<ReadonlyArray<Location>> {
    const searchString = "23 Queen";
    const httpParams = new HttpParams()
      .set('countryCode','AUS')
      .set('f','pjson')
      .set('text',searchString);
    return this.httpClient
      .get<{ suggestions: ReadonlyArray<Location> }>(AppComponent.ROOT_URL,{params: httpParams})
      .pipe(
        pluck('suggestions')
      )
    ;
  }
}

我尝试进行堆叠攻击的尝试是here。

REST API的示例响应为here。

如何从输入到REST API的字符串中获取字符串，并将结果返回到typeahead下拉列表中？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular javascript ng-bootstrap