# @angular-material-extensions/google-maps-autocomplete 中文文档 规范地址：https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/ 版本：16\.4\.0 npm 元数据更新时间：2024-09-21T08:56:10.254Z 中文译文更新时间：2026-11-06T04:15:02.081Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40angular-material-extensions/google-maps-autocomplete 原文对照：https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/?lang=original 项目主页：https://angular-material-extensions.github.io/google-maps-autocomplete 源码仓库：https://github.com/angular-material-extensions/google-maps-autocomplete ## 关键信息（来自 npm 元数据） - 包体积（解压后）：378 kB，89 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=16\.0\.0 - 运行依赖：1 个 - peer 依赖：@angular/common ^16\.x，@angular/core ^16\.x，@angular/platform-browser ^16\.x，@angular/flex-layout ^15\.0\.0-beta\.42，@angular/forms ^16\.x，@angular/cdk ^16\.x，@angular/material ^16\.x，@types/googlemaps ~3\.43\.3，rxjs ^7\.x，zone\.js ~0\.13\.x - 首次发布：2018-06-18T21:27:46.944Z - 最新版本发布：2024-09-21T08:56:10.035Z - 近 30 天下载量：9617（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：46（近 12 个月 0 个） ## 中文简介 用角和材料设计构建的google-maps自动完成输入组件和指令 ## 安装 ```sh npm install @angular-material-extensions/google-maps-autocomplete ``` 也可以使用：`pnpm add @angular-material-extensions/google-maps-autocomplete`、`yarn add @angular-material-extensions/google-maps-autocomplete`、`bun add @angular-material-extensions/google-maps-autocomplete` ## README ![angular-material-extensions's logo](https://cdn.rawgit.com/angular-material-extensions/google-maps-autocomplete/master/assets/angular-material-extensions-logo.svg) # @angular-material-extensions/google-maps-autocomplete - 用angular材料设计建造的google-maps自动完成输入组件 [![npm version](https://badge.fury.io/js/%40angular-material-extensions%2Fgoogle-maps-autocomplete.svg)](https://badge.fury.io/js/%40angular-material-extensions%2Fgoogle-maps-autocomplete) [![npm demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://angular-material-extensions.github.io/google-maps-autocomplete) [![Join the chat at https://gitter.im/angular-material-extensions/Lobby](https://badges.gitter.im/angular-material-extensions/Lobby.svg)](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Coverage Status](https://coveralls.io/repos/github/angular-material-extensions/google-maps-autocomplete/badge.svg?branch=master)](https://coveralls.io/github/angular-material-extensions/google-maps-autocomplete?branch=master) [![Build Status](https://travis-ci.org/angular-material-extensions/google-maps-autocomplete.svg?branch=master)](https://travis-ci.org/angular-material-extensions/google-maps-autocomplete) [![CircleCI branch](https://img.shields.io/circleci/project/github/angular-material-extensions/google-maps-autocomplete/master.svg?label=circleci)](https://circleci.com/gh/angular-material-extensions/google-maps-autocomplete) [![Greenkeeper Badge](https://badges.greenkeeper.io/angular-material-extensions/google-maps-autocomplete.svg)](https://greenkeeper.io/) [![license](https://img.shields.io/github/license/angular-material-extensions/google-maps-autocomplete.svg?style=flat-square)](https://github.com/angular-material-extensions/google-maps-autocomplete/blob/master/LICENSE) [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/gdi2290/awesome-angular) ![@angular-material-extensions/google-maps-autocomplete](https://raw.githubusercontent.com/angular-material-extensions/google-maps-autocomplete/HEAD/assets/demo1.gif) ![@angular-material-extensions/google-maps-autocomplete](https://raw.githubusercontent.com/angular-material-extensions/google-maps-autocomplete/HEAD/assets/v3.0.0/search.gif) `Please use lib v8 only with angular v15` ## 由开发者建并供开发者使用 : 心脏 : 你有什么问题或建议吗? 请不要犹豫联系我们! 或者,提供 PR QQ 打开适当的 问题 [这里](https://github.com/angular-material-extensions/google-maps-auto/issues) 如果你喜欢这个项目,请支持 [角-材料-扩展](https://github.com/angular-material-extensions) 由主演: 明星: 分享它 : 高音: ## 目录 - [演示](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-demo) - [依赖关系](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-dependencies) - [同伴依赖关系](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-peerDependencies) - [额外要求 -- -- 材料(包括主题)](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-additional-requirements-material-theme) - [安装](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-installation) - [使用量](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-usage) - [文档](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-documentation) - [本地运行 Demo 应用程序](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-run-demo-app-locally) - [发展](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-development) - [其他角图书馆](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-other-angular-libraries) - [支助](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-support) - [许可证](https://npmcn.com/package/%40angular-material-extensions/google-maps-autocomplete/#readme-license) ## [演示](https://angular-material-extensions.github.io/google-maps-autocomplete) 在行动中查看所有指令和组成部分 时间 [https://angular-material-extension.github.io/google-maps-autocomplete (原始内容存档于2018-09-26)](https://angular-material-extensions.github.io/google-maps-autocomplete) ## 依赖关系 - [角质](https://angular.io/) (单位:千美元)_需求_ 最新动画 选项 ```bash npm i -D @types/googlemaps ``` ## [安装](https://angular-material-extensions.github.io/google-maps-autocomplete/getting-started) ## 1\. 通过 _纳克后加_. (建议) 如果角材料设计没有设置, 就 运行 `ng add @angular/material` [学习更多](https://material.angular.io/guide/getting-started) 现在通过 `angular schematics` 万事俱备 ```shell ng add @angular-material-extensions/google-maps-autocomplete ``` ## 2\. 通过 _无_. (备选案文) 现在安装 `@angular-material-extensions/google-maps-autocomplete` 通过: ```shell npm install --save @angular-material-extensions/google-maps-autocomplete ``` ### 要求(类依赖): 请考虑安装以下软件包 - [角动画 v16.x](https://www.npmjs.com/package/@angular/animations) - [角形式 v16.x](https://www.npmjs.com/package/@angular/forms) - [角材料 v16.x](https://www.npmjs.com/package/@angular/material) - [角 cdk v16.x 数据](https://www.npmjs.com/package/@angular/cdk) ```bash ng add @angular/material ``` ### 所需额外经费 - [角材料主题](https://material.angular.io/guide/getting-started#step-4-include-a-theme) * * * 安装后需要导入主模块 : ```js import {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete'; ``` 剩下的唯一部分是在您的应用程序模块中列出导入的模块. 准确的方法是略微的 不同的根(顶级)模块,您最终应当使用类似于(顶级)的代码 通知 `MatGoogleMapsAutocompleteModule.forRoot()`: ```js import {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete'; @NgModule({ declarations: [AppComponent, ...], imports: [ MatGoogleMapsAutocompleteModule.forRoot('YOUR_GOOGLE_MAPS_API_KEY'), ...], bootstrap: [AppComponent] }) export class AppModule { } ``` 应用程序中的其他模块可以简单地导入 `MatGoogleMapsAutocompleteModule`数字 : ```js import {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete'; @NgModule({ declarations: [OtherComponent, ...], imports: [ MatGoogleMapsAutocompleteModule, ...], }) export class OtherModule { } ``` ## [使用量](https://angular-material-extensions.github.io/google-maps-autocomplete/getting-started) ### 作为指令 添加 `matGoogleMapsAutocomplete` 到您的目标 html 输入元素, 使 google 地图自动完成 api 作为特性 ```html Address << using the directive >> ``` ### 作为组件 #### 或换用 `mat-google-maps-auto-complete`,UI包装器 添加 `mat-google-maps-auto-complete` 模板中的元素 ### `mat-google-maps-auto-complete` ```html ``` 一个定制的 `mat-google-maps-autocomplete` ```html ``` 结合 `mat-google-maps-autocomplete` 带有谷歌映射实例 ```html
``` 在组件中,代码将类似于 -- > ```typescript import {Component, OnInit, ViewEncapsulation} from '@angular/core'; import {Title} from '@angular/platform-browser'; import {Location, Appearance, GermanAddress} from '@angular-material-extensions/google-maps-autocomplete'; import {} from '@types/googlemaps'; import PlaceResult = google.maps.places.PlaceResult; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'], encapsulation: ViewEncapsulation.None, }) export class HomeComponent implements OnInit { public appearance = Appearance; public zoom: number; public latitude: number; public longitude: number; public selectedAddress: PlaceResult; constructor(private titleService: Title) { } ngOnInit() { this.titleService.setTitle('Home | @angular-material-extensions/google-maps-autocomplete'); this.zoom = 10; this.latitude = 52.520008; this.longitude = 13.404954; this.setCurrentPosition(); } private setCurrentPosition() { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition((position) => { this.latitude = position.coords.latitude; this.longitude = position.coords.longitude; this.zoom = 12; }); } } onAutocompleteSelected(result: PlaceResult) { console.log('onAutocompleteSelected: ', result); } onLocationSelected(location: Location) { console.log('onLocationSelected: ', location); this.latitude = location.latitude; this.longitude = location.longitude; } onGermanAddressMapped($event: GermanAddress) { console.log('onGermanAddressMapped', $event); } } ``` #### 反应表单示例 ```html
// OR
``` ```typescript import {Component, OnInit} from '@angular/core'; import {FormControl, FormGroup} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { addressFormGroup: FormGroup; ngOnInit(): void { this.addressFormGroup = new FormGroup({ address: new FormControl(), }); this.addressFormGroup.get('address').valueChanges.subscribe(value => console.log('value changed', value)) } } ``` ### API - 更多信息请访问官方文档 [地图 JavaScript API](https://developers.google.com/maps/documentation/javascript/places-autocomplete?hl=en) ### `matGoogleMapsAutocomplete` | 选项 | 绑定 | 类型 | 默认 | 说明 | | :-- | :-: | :-: | :-: | :-- | | 价值 | `Input()` | 地方救济; | \- 说吧 | | | 地址 | `Input()` | 地点 | 字符串; | \- 说吧 | | 国家 | `Input()` | 字符串 | 字符串\[ \]; | \- 说吧 | | 仅存的地方 | `Input()` | 布尔 | \- 说吧 | 可用于指示自动完整部件只获取 Place ID。 在自动完整对象上调用 getPlace( ) 时, 可用的 PlaceResult 将只设置位置 ID、 类型和名称属性 。 您可以使用返回的地址ID, 并使用 Places, Geocoding, 方向或远程矩阵服务 . | | 严格边界 | `Input()` | 布尔 | \- 说吧 | 是一个布尔来指定 API 是否只必须返回严格在指定界限所定义区域内的位置 。 API即使匹配用户输入,也不会返回此区域以外的结果. | | 类型 | `Input()` | 字符串 \[\] | \- 说吧 | 一组类型指定了明确的类型或类型集合,如下文所支持的类型所列出. 如果没有指定,则返回所有类型。 一般来说,只允许单一类型。 例外是,您可以安全地混合地理代码和建立类型,但请注意,这将具有与指定任何类型相同的效果. 支持的类型如下:. | | 类型 | `Input()` | 字符串 | \- 说吧 | | | 自动完成选项 | `Input()` | 自动完成选项 | \- 说吧 | 所有以上输入在一个对象中! 传递到此对象的数据如果存在, 将会与输入合并 | | 变化 | `Output()` | 地点 | 字符串 | 无效 | | 自动完成 | `Output()` | 地点 | \- 说吧 | 当通过 google 地图自动完成组件选择一个位置时, 事件将被启动 | | 在德文地址夹上 | `Output()` | 德国语地址 | \- 说吧 | 当一个位置被选中并映射到德国地址界面时, 事件将被解除 | | 选中位置 | `Output()` | 地点 | \- 说吧 | 当通过 google 地图自动完成组件选择一个位置时, 事件将被启动 | #### 支持类型 | 类型 | 说明 | | :-- | :-: | | 地理编码 | 指示Places服务只返回地理编码结果,而不是商业结果. | | 地址 | 指示 Places 服务只返回带有精确地址的地理编码结果 . | | 设立 | 指示 Places 服务只返回业务结果 . | | 区域 | 指示 Places 服务返回符合以下类型的任何结果: 地点、 子地点、 邮政 代码、 国家、 行政 地区1、 行政 地区2 | | 城市 | 指示地点服务处返回符合地点或行政区域3的结果. | ### `mat-google-maps-autocomplete` 包括所有内容 `matGoogleMapsAutocomplete` +以下各项 | 选项 | 绑定 | 类型 | 默认 | 说明 | | :-- | :-: | :-: | :-: | :-- | | 地址标签文字 | `Input()` | 字符串; | 使用组件的地址 | 不言自明 | | 占位符文本 | `Input()` | 字符串; | 请输入地址 | 不言自明 | | 需要的错误文本 | `Input()` | 字符串; | 需要地址吗 | 不言自明 | | 无效的错误文本 | `Input()` | 字符串; | 地址无效 | 不言自明 | | 外观 | `Input()` | 外观 | 字符串; | 外观 | ### `mat-search-google-maps-autocomplete` | 选项 | 绑定 | 类型 | 默认 | 说明 | | :-- | :-: | :-: | :-: | :-- | | 搜索BarApearance 选项 | `Input()` | 外观 | 字符串; | 外观 | | 外观 | `Input()` | 外观 | 字符串; | 外观 | | 搜索地址标签 | `Input()` | 字符串; | `Search Address` | 输入标签 | | 街道Name 标签 | `Input()` | 字符串; | `Street` | 输入标签 | | 街道编号标签 | `Input()` | 字符串; | `Nr.` | 输入标签 | | 邮政编码标签 | `Input()` | 字符串; | `PLZ` | 输入标签 | | 标签附近 | `Input()` | 字符串; | `Locality` | 输入标签 | | 方位标签 | `Input()` | 字符串; | `Locality` | 输入标签 | | 显示维度 | `Input()` | 布尔; | `false` | 输入标签 - 是否显示节能 | | 只读 | `Input()` | 布尔; | `false` | 只读输入 | | 禁用搜索 | `Input()` | 布尔; | `false` | 禁用用户搜索一个地方 | | 价值 | `Input()` | `GermanAddress`· ; | \- 说吧 | 该组件的初始值 | | 国家 | `Input()` | 字符串 | 字符串\[ \]; | \- 说吧 | | 仅存的地方 | `Input()` | 布尔 | \- 说吧 | 可用于指示自动完整部件只获取 Place ID。 在自动完整对象上调用 getPlace( ) 时, 可用的 PlaceResult 将只设置位置 ID、 类型和名称属性 。 您可以使用返回的地址ID, 并使用 Places, Geocoding, 方向或远程矩阵服务 . | | 严格边界 | `Input()` | 布尔 | \- 说吧 | 是一个布尔来指定 API 是否只必须返回严格在指定界限所定义区域内的位置 。 API即使匹配用户输入,也不会返回此区域以外的结果. | | 类型 | `Input()` | 字符串 \[\] | \- 说吧 | 一组类型指定了明确的类型或类型集合,如下文所支持的类型所列出. 如果没有指定,则返回所有类型。 一般来说,只允许单一类型。 例外是,您可以安全地混合地理代码和建立类型,但请注意,这将具有与指定任何类型相同的效果. 支持的类型如下:. | | 类型 | `Input()` | 字符串 | \- 说吧 | | | 在德文地址夹上 | `Output()` | 事件编辑器 | 字符串; | 外观 | ![@angular-material-extensions/google-maps-autocomplete](https://raw.githubusercontent.com/angular-material-extensions/google-maps-autocomplete/HEAD/assets/v3.0.0/search1.png) ```html Auto Parse Address > ``` ```typescript import {Appearance, GermanAddress, Location} from '@angular-material-extensions/google-maps-autocomplete'; onGermanAddressMapped($event; : GermanAddress; ) { console.log('onGermanAddressMapped', $event); } ``` ## [文档](https://angular-material-extensions.github.io/google-maps-autocomplete/doc/index.html) 请检查完 文档 [这里](https://angular-material-extensions.github.io//google-maps-autocomplete/doc/index.html) 或遵循 正式 [教程](https://angular-material-extensions.github.io//google-maps-autocomplete/getting-started) ## 本地运行 Demo 应用程序 - [复制此 repo](https://github.com/angular-material-extensions/google-maps-autocomplete.git) 通过运行 ```bash $ git clone https://github.com/angular-material-extensions/google-maps-autocomplete.git ``` - 链接 **@angular-material-extension/google-maps-自动完成** 软件包 ```bash $ gulp link ``` - 导航到演示应用程序目录, 安装依赖并服务应用程序 ```bash $ cd demo && npm i && npm start ``` - 该应用程序现在由 `http://localhost:4200/` ## 发展 2. 复制这个 [还原](https://github.com/angular-material-extensions/google-maps-autocomplete.git) 3. 通过运行安装依赖关系 `npm i` 4. 转到 lib 目录 `projects/angular-material-extensions/google-maps-autocomplete` 5. 建立图书馆 `npm run build` * * * ## 其他角图书馆 - [ngx-auth-fire-baseui (英语)](https://github.com/AnthonyNahas/ngx-auth-firebaseui) - [ngx-链接js](https://github.com/AnthonyNahas/ngx-linkifyjs) - [ngx-mailto (英语)](https://github.com/AnthonyNahas/ngx-mailto) - [@ firebaseui/ng-bootstrap (英语)](https://github.com/firebaseui/ng-bootstrap) - [@angular-material-extensions/页面](https://github.com/angular-material-extensions/pages) - [@angular-material-extensions/link-preview (英语)](https://github.com/angular-material-extensions/link-preview) - [@angular-material-extensions/password-strength (原始内容存档于2019-09-26) (英语)](https://github.com/angular-material-extensions/password-strength) - [@angular-material-extensions/select-country (英语)](https://github.com/angular-material-extensions/select-country) - [@angular-material-extension/select-icon (原始内容存档于2018-09-28)](https://github.com/angular-material-extensions/select-icon) - [@angular-material-extensions/fab-menu (法语)](https://github.com/angular-material-extensions/fab-menu) - [@angular-材料扩展/faq](https://github.com/angular-material-extensions/faq) - [@angular-material-extensions/ contacts (英语)](https://github.com/angular-material-extensions/contacts) * * * ## 支助 - 丢弃电子邮件到 : [安东尼·纳哈斯](mailto:anthony.na@hotmail.de) - 或打开适当的 [问题](https://github.com/angular-material-extensions/google-maps-autocomplete/issues) - 让我们谈谈 [减肥](https://gitter.im/angular-material-extensions/Lobby) 由开发商建造 * * * ## 谁在使用ngx -mailto? 伟大的应用程序? 1. [Nahaus.de - Digitale und automatisierte Immobileenverwaltung 软件公司 私人 Vermieter und Hausverwaltungen](https://nahaus.de/) 你错过了你的项目还是你的应用? 公关我发表在读本上 * * * ## 许可证 版权(c) 2019-2024 [安东尼·纳哈斯](https://github.com/AnthonyNahas)获得麻省理工学院许可 (麻省理工学院) ![angular-material-extensions's logo](https://cdn.jsdelivr.net/gh/angular-material-extensions/google-maps-autocomplete@master/assets/badge_made-in-germany.svg) ## 常见问题 ### @angular-material-extensions/google-maps-autocomplete 是什么？ 用角和材料设计构建的google-maps自动完成输入组件和指令 ### 如何安装 @angular-material-extensions/google-maps-autocomplete？ 在项目目录运行 npm install @angular-material-extensions/google-maps-autocomplete，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（^16\.x）、@angular/core（^16\.x）、@angular/platform-browser（^16\.x）、@angular/flex-layout（^15\.0\.0-beta\.42）、@angular/forms（^16\.x）、@angular/cdk（^16\.x）、@angular/material（^16\.x）、@types/googlemaps（~3\.43\.3）、rxjs（^7\.x）、zone\.js（~0\.13\.x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @angular-material-extensions/google-maps-autocomplete 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @angular-material-extensions/google-maps-autocomplete 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @angular-material-extensions/google-maps-autocomplete 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=16\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @angular-material-extensions/google-maps-autocomplete 可以商用吗？ @angular-material-extensions/google-maps-autocomplete 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @angular-material-extensions/google-maps-autocomplete 的下载量有多少？ 根据 npm 官方下载统计，@angular-material-extensions/google-maps-autocomplete 在 2026/10/06 – 2026/11/04 这 30 天内被下载 9,617 次，日均约 321 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @angular-material-extensions/google-maps-autocomplete 还在维护吗？ 最新版本 16\.4\.0 发布于 2024/09/21（2 年前）；至今共发布 46 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/06/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。