简介
ng4-geoautocomplete 是一个 Angular 4+ 的 npm 包，它可以为输入框提供 Google 地址自动完成的功能。它的主要特点如下：
- 输入框支持联想提醒，用户输入关键字时会自动显示匹配的地址。
- 支持自定义 Google 地图 API 密钥。
- 支持自定义搜索结果过滤器和显示格式。
如果你在 Angular 项目中需要添加地址自动完成的功能，那么 ng4-geoautocomplete 会是一个不错的选择。
安装
安装 ng4-geoautocomplete 最简单的方式是使用 npm：
npm install --save ng4-geoautocomplete
使用
使用 ng4-geoautocomplete 需要先在模块中导入 GeoautocompleteModule，然后在组件中使用 geo-autocomplete 指令。
模块导入
将 GeoautocompleteModule 导入到你的模块中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - --------------------- - ---- ----------------------
-----------
-------- -
---------------------
-
--
------ ----- --------- - -组件中使用指令
在你的组件模板中，添加一个输入框，并使用 geo-autocomplete 指令：
<input type="text" [(ngModel)]="searchTerm" [geo-autocomplete]="autocompleteOptions" />
这里的 autocompleteOptions 是一个配置对象，用于定义自动完成的行为。
下面是一个示例配置对象：
autocompleteOptions = {
types: [ '(cities)' ],
componentRestrictions: { country: 'fr' }
};配置对象
下面是 autocompleteOptions 配置对象的详细说明：
types：一个字符串数组，用于限定搜索结果的类型。可选值包括：'geocode'：一般目的的地址类型。'establishment'：商业地点类型。'address'：完整地址类型。'(regions)'：行政区类型。'(cities)'：城市类型。
componentRestrictions：一个对象，用于限定搜索结果的地理区域。可以使用以下属性：country：限定为某个国家。administrativeArea：限定为某个省份、州、自治区等行政区域。locality：限定为某个城市。postalCode：限定为某个邮政编码区域。route：限定为某个街道。
示例代码
下面是一个完整的 ng4-geoautocomplete 示例代码：
<input type="text" [(ngModel)]="searchTerm" [geo-autocomplete]="autocompleteOptions" />
<ng-template #searchResult let-searchResult>
<div>{{ searchResult.formatted_address }}</div>
</ng-template>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----------- -------
-------------------- ----------------------- - -
------ - ---------- --
---------------------- - -------- ---- -
--
------------------- ---------------- ---------------- - -
---------- -
---------------------------------------------- -- -
--------------------- -- ---------
---
-
-在这个例子中，我们还定义了一个搜索结果模板 #searchResult，用于在 HTML 中显示自动完成结果。
总结
ng4-geoautocomplete 是一个实用的 Angular 自动完成组件，它可以为用户提供 Google 地址自动完成的功能。使用它需要先在模块中导入 GeoautocompleteModule，然后在组件中使用 geo-autocomplete 指令，同时为其提供一个配置对象。通过 geoautocomplete.results 可以监听用户的搜索行为，从而进行进一步的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005677d81e8991b448e3e2c