@angular-material-extensions/google-maps-autocomplete - 用angular材料设计建造的google-maps自动完成输入组件

Please use lib v8 only with angular v15

由开发者建并供开发者使用 : 心脏 :

你有什么问题或建议吗? 请不要犹豫联系我们! 或者,提供 PR QQ 打开适当的 问题 这里

如果你喜欢这个项目,请支持 角-材料-扩展 由主演: 明星: 分享它 : 高音:

目录

• 演示
• 依赖关系
• 同伴依赖关系
• 额外要求 -- -- 材料(包括主题)
• 安装
• 使用量
• 文档
• 本地运行 Demo 应用程序
• 发展
• 其他角图书馆
• 支助
• 许可证

演示

在行动中查看所有指令和组成部分 时间 https://angular-material-extension.github.io/google-maps-autocomplete (原始内容存档于2018-09-26)

• 角质 (单位:千美元)需求 最新动画

选项

npm i -D @types/googlemaps 

安装

1. 通过 纳克后加. (建议)

如果角材料设计没有设置, 就 运行 ng add @angular/material 学习更多

现在通过 angular schematics 万事俱备

ng add @angular-material-extensions/google-maps-autocomplete

2. 通过 无. (备选案文)

现在安装 @angular-material-extensions/google-maps-autocomplete 通过:

npm install --save @angular-material-extensions/google-maps-autocomplete

• 角动画 v16.x
• 角形式 v16.x
• 角材料 v16.x
• 角 cdk v16.x 数据

ng add @angular/material  

• 角材料主题

安装后需要导入主模块 :

import {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete';

剩下的唯一部分是在您的应用程序模块中列出导入的模块. 准确的方法是略微的 不同的根(顶级)模块,您最终应当使用类似于(顶级)的代码 通知 MatGoogleMapsAutocompleteModule.forRoot():

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数字 :

import {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [
    MatGoogleMapsAutocompleteModule, ...],
})
export class OtherModule {
}

使用量

作为指令

添加 matGoogleMapsAutocomplete 到您的目标 html 输入元素, 使 google 地图自动完成 api 作为特性

<mat-form-field>
  <mat-label>Address << using the directive >></mat-label>
  <input matInput
         matGoogleMapsAutocomplete
         [country]="de"
         (onAutocompleteSelected)="onAutocompleteSelected($event)"
         (onLocationSelected)="onLocationSelected($event)">
</mat-form-field>

作为组件

或换用 mat-google-maps-auto-complete,UI包装器

添加 mat-google-maps-auto-complete 模板中的元素

mat-google-maps-auto-complete

<mat-google-maps-autocomplete [appearance]="appearance.OUTLINE"
                              (onAutocompleteSelected)="onAutocompleteSelected($event)"
                              (onLocationSelected)="onLocationSelected($event)">
</mat-google-maps-autocomplete>

一个定制的 mat-google-maps-autocomplete

<mat-google-maps-autocomplete country="us"
                              type="address"
                              (onAutocompleteSelected)="onAutocompleteSelected($event)"
                              (onLocationSelected)="onLocationSelected($event)">
</mat-google-maps-autocomplete>

结合 mat-google-maps-autocomplete 带有谷歌映射实例

<div class="container" fxLayout="column" fxLayoutAlign="center">

  <div fxFlex fxFlexAlign="center"
       class="autocomplete-container"
       [ngStyle.xs]="{'min-width.%': 100}"
       [ngStyle.sm]="{'width.%': 70}">
    <mat-google-maps-autocomplete (onAutocompleteSelected)="onAutocompleteSelected($event)"
                                  (onLocationSelected)="onLocationSelected($event)"
                                  (onGermanAddressMapped)="onGermanAddressMapped($event)">
    </mat-google-maps-autocomplete>
  </div>

</div>

在组件中,代码将类似于 -- >

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);
  }

}

反应表单示例

<form [formGroup]="addressFormGroup">
  <mat-search-google-maps-autocomplete formControlName="address">
  </mat-search-google-maps-autocomplete>

  // OR

  <mat-google-maps-autocomplete formControlName="address">
  </mat-google-maps-autocomplete>

</form>

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

matGoogleMapsAutocomplete

支持类型

mat-google-maps-autocomplete

包括所有内容 matGoogleMapsAutocomplete +以下各项

mat-search-google-maps-autocomplete

<mat-card>
  <mat-card-title>Auto Parse Address</mat-card-title>
  <mat-card-content>
    <!-- #######   here we go !! ######-->
    <mat-search-google-maps-autocomplete appearance="outline"
                                         country="de"
                                         (onGermanAddressMapped)="onGermanAddressMapped($event)">
      >
    </mat-search-google-maps-autocomplete>
  </mat-card-content>
</mat-card>

import {Appearance, GermanAddress, Location} from '@angular-material-extensions/google-maps-autocomplete';

onGermanAddressMapped($event;
:
GermanAddress;
)
{
  console.log('onGermanAddressMapped', $event);
}

文档

请检查完 文档 这里 或遵循 正式 教程

• 复制此 repo 通过运行

$ git clone https://github.com/angular-material-extensions/google-maps-autocomplete.git

• 链接 @angular-material-extension/google-maps-自动完成 软件包

$ gulp link

• 导航到演示应用程序目录, 安装依赖并服务应用程序

$ cd demo && npm i && npm start

• 该应用程序现在由 http://localhost:4200/

1. 复制这个 还原
2. 通过运行安装依赖关系 npm i
3. 转到 lib 目录 projects/angular-material-extensions/google-maps-autocomplete
4. 建立图书馆 npm run build

• ngx-auth-fire-baseui (英语)
• ngx-链接js
• ngx-mailto (英语)
• @ firebaseui/ng-bootstrap (英语)
• @angular-material-extensions/页面
• @angular-material-extensions/link-preview (英语)
• @angular-material-extensions/password-strength (原始内容存档于2019-09-26) (英语)
• @angular-material-extensions/select-country (英语)
• @angular-material-extension/select-icon (原始内容存档于2018-09-28)
• @angular-material-extensions/fab-menu (法语)
• @angular-材料扩展/faq
• @angular-material-extensions/ contacts (英语)

• 丢弃电子邮件到 : 安东尼·纳哈斯
• 或打开适当的 问题
• 让我们谈谈 减肥

由开发商建造

谁在使用ngx -mailto? 伟大的应用程序?

1. Nahaus.de - Digitale und automatisierte Immobileenverwaltung 软件公司 私人 Vermieter und Hausverwaltungen

你错过了你的项目还是你的应用? 公关我发表在读本上

许可证

版权(c) 2019-2024 安东尼·纳哈斯获得麻省理工学院许可 (麻省理工学院)