gpt4 book ai didi

Angular 6,AGM 在谷歌自动完成中选择第一个地址

转载 作者:太空狗 更新时间:2023-10-29 18:07:43 24 4
gpt4 key购买 nike

我在我的 Angular 项目中使用 AGM 作为谷歌地址建议。如果用户没有选择任何地址,我想选择第一个地址

请任何人对此提出一些建议。

提前致谢。

最佳答案

经过这么多时间寻找解决方案终于找到了,

如果您已经在 Angular 2,4 5 & 6 中实现了 google 地址建议(自动完成),并且想默认选择第一个建议,那么我们来看工作示例,

我们必须单独创建一个服务并需要订阅它。我在下面给出了工作示例,

重要:耐心地研究它并更改名称和所有它肯定会起作用。


app.component.ts

import { Component } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import { PlacePredictionService } from './place-prediction.service';

import { Observable } from 'rxjs/Observable';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

private searchTerm: string;
private results$: Observable<any[]>;

testResult = [{description: 'test'},{description: 'test'}];

constructor(
private mapsAPILoader: MapsAPILoader,
private placePredictionService: PlacePredictionService
){}

onSearch(term: string){

this.searchTerm = term;

if (this.searchTerm === '') return;

this.results$ = this.placePredictionService.getPlacePredictions(term);

}

}

place-prediction.service.ts

import { Injectable } from "@angular/core";
import { MapsAPILoader } from "@agm/core";

import { Observable } from "rxjs/Observable";

import "rxjs/add/observable/of";
import "rxjs/add/observable/bindCallback";

@Injectable()
export class PlacePredictionService {
private autocompleteService;

constructor(private mapsAPILoader: MapsAPILoader) {

this.mapsAPILoader.load().then(() => {
this.autocompleteService = new
google.maps.places.AutocompleteService();
});

}

// Wrapper for Google Places Autocomplete Prediction API, returns
observable

getPlacePredictions(term: string): Observable<any[]> {
return Observable.create(observer => {
// API Call

this.autocompleteService.getPlacePredictions({ input: term }, data => {
let previousData: Array<any[]>;

// Data validation

if (data) {
console.log(data);
previousData = data;
observer.next(data);
observer.complete();
}

// If no data, emit previous data

if (!data) {
console.log("PreviousData: ");
observer.next(previousData);
observer.complete();

// Error Handling

} else {
observer.error(status);
}

});

});

}
}

app.component.html

<h1>Google Places Test</h1>

<p>Angular 5 &amp; RxJS refresher</p>

<input
type="search"
placeholder="Search for place"
autocomplete="off"
autocapitalize="off"
autofocus
#search
(keyup)="onSearch(search.value)"/>

<p>{{ searchTerm }}</p>

<ul>

<li *ngFor="let result of results$ | async "> {{result.description}}
</li>

</ul>

对我来说它是有效的,如果你遇到任何问题请添加你的评论(或发邮件给我@saravanava3@gmail.com),如果我知道你的查询我会回复

关于Angular 6,AGM 在谷歌自动完成中选择第一个地址,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51759264/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com