如果你开发前端应用，并且需要提供地理位置搜索和自动完成的功能，那么 @wiredviews/ngx-google-places-autocomplete 可能会对你有所帮助。本文将会介绍一下如何使用这个npm包，并提供一些使用上的建议和示例代码。
什么是 @wiredviews/ngx-google-places-autocomplete
@wiredviews/ngx-google-places-autocomplete 是一个用于从谷歌地图（Google Maps） API 中获取地理位置信息的npm包。该npm包能够帮助你完成以下功能：
- 基于关键字的自动完成搜索地点
- 检查地点的合法性
- 获取选定地点的详细位置信息
如何引入和使用 @wiredviews/ngx-google-places-autocomplete
在你的项目中引入 @wiredviews/ngx-google-places-autocomplete 是非常简单的。你只需要通过npm来安装该包，并根据以下步骤配置你的应用即可：
- 在你的项目中安装 @wiredviews/ngx-google-places-autocomplete，可以使用以下命令：
npm install @wiredviews/ngx-google-places-autocomplete
- 在 NgModule 中导入 NgxGooglePlacesAutocompleteModule：
-- -------------------- ---- -------
------ - ----------- - ---- -----------------
------ - --------------------------------- - ---- ---------------------------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------
-------------------------------------------
------- --------------
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -在上面的代码中：
NgxGooglePlacesAutocompleteModule.forRoot()方法会使用你提供的API密钥进行地方搜索和自动完成功能。- API 密钥可以在 Google Cloud Platform 中创建。
- 这个方法接受 options 对象，该对象至少必须包含 apiKey 属性。
- 在 HTML 模板中，应用 <ngx-google-places-autocomplete> 组件：
<ngx-google-places-autocomplete
id="autocomplete"
(onAddressChange)="onAddressChange($event)"
[options]="{
componentRestrictions: { country: ['US'] }
}"
></ngx-google-places-autocomplete>- 在组件中声明 onAddressChange 事件：
export class AppComponent {
onAddressChange(address: Address) {
console.log('Address:', address);
}
}现在 @wiredviews/ngx-google-places-autocomplete 已经能够正确运行了。
注意：如果你需要将 ngx-google-places-autocomplete 组件加载到某个模块中，请使用 NgxGooglePlacesAutocompleteModule.forChild() 方法，而非 NgxGooglePlacesAutocompleteModule.forRoot() 方法。
一些使用上的建议
@wiredviews/ngx-google-places-autocomplete 提供了很多高级选项，可以用于自定义地点搜索和自动完成功能。这里提供一些使用上的建议，并附上相应的代码示例。
更改搜索半径
默认情况下，自动完成搜索区域的半径为 50000 米，即 50 公里。如果你想扩展或者缩小搜索范围，可以通过以下代码将半径更改为 10 公里：
<ngx-google-places-autocomplete
...
[options]="{
radius: 1000 * 10, // in meters
}"
></ngx-google-places-autocomplete>限制自动完成搜索
如果你只想搜索美国的地址，可以使用 componentRestrictions 选项来过滤搜索结果：
<ngx-google-places-autocomplete
...
[options]="{
componentRestrictions: { country: ['US'] }
}"
></ngx-google-places-autocomplete>限制搜索的地点类型
如果你只想搜索商店，可以使用 types 选项来限制搜索结果：
<ngx-google-places-autocomplete
...
[options]="{
types: ['establishment']
}"
></ngx-google-places-autocomplete>关闭自动完成下拉框
如果你想禁用自动完成下拉框，可以使用 showAutocomplete 选项将其设置为 false：
<ngx-google-places-autocomplete
...
[options]="{
showAutocomplete: false
}"
></ngx-google-places-autocomplete>相关 API
你可能需要使用以下 API 来获取更详细的位置信息：
getDetails() 方法
该方法可以获取某个位置的详细信息，如下所示：
-- -------------------- ---- -------
------ - ---------------------------------- - ---- ---------------------------------------------
------ ----- ------------ -
------------------- ----- ----------------------------------- --
------------------------ -------- -
---------
-----------------------------
------------------ -- ----------------------- ----------
-
-isLocationValid() 方法
该方法可以判断某个位置是否合法，如下所示：
-- -------------------- ---- -------
------ - ---------------------------------- - ---- ---------------------------------------------
------ ----- ------------ -
------------------- ----- ----------------------------------- --
------------------------ -------- -
--------------- ----- ----------- ------------------------------------
-
-结论
在上面的使用示例中，我们已经学习了如何使用 @wiredviews/ngx-google-places-autocomplete，并附带了一些代码示例。这个npm包提供了很多高级选项，以适应各种需求。如果你正在开发前端应用，并且需要提供地点搜索和自动完成功能，那么这个npm包可能非常适合你的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b36647