我想在Angular-7应用程序中应用Google Place自动完成搜索功能。经过几次研究,我能够编写以下代码:
app.module.ts
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';
import { AgmCoreModule } from '@agm/core';
imports: [
GooglePlaceModule,
AgmCoreModule.forRoot({
apiKey: 'the key',
libraries: ['places']
}),
],
client.component.ts
import { Component, OnInit, ElementRef, NgZone, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../../shared/services/api.service';
import { TokenService } from '../../shared/services/token.service';
import { Router } from '@angular/router';
import { SnotifyService } from 'ng-snotify';
import swal from 'sweetalert2';
import { FormControl } from "@angular/forms";
import { MapsAPILoader } from '@agm/core';
declare var google: any;
@Component({
selector: 'app-client-quotes-landing',
templateUrl: './client-quotes-landing.component.html',
styleUrls: ['./client-quotes-landing.component.scss']
})
export class ClientQuotesLandingComponent implements OnInit {
public latitude: number;
public longitude: number;
public searchControl: FormControl;
public zoom: number;
@ViewChild("search")
public searchElementRef: ElementRef;
formattedAddress = '';
truck_types = [];
public form = {
first_name : null,
last_name : null,
email : null,
phone : null,
address : null,
business_name : null,
truck_required : null,
truck_type : null,
quote_origin : null,
quote_destination : null,
commodity : null,
loading_date : null,
comment : null,
};
constructor(
private api: ApiService,
private token: TokenService,
private router: Router,
private notify: SnotifyService,
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone
) {
}
ngOnInit() {
//set google maps defaults
this.zoom = 4;
this.latitude = 8.6753;
this.longitude = 9.0820;
//create search FormControl
this.searchControl = new FormControl();
//set current position
this.setCurrentPosition();
//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: ["address"]
});
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
//get the place result
let place: google.maps.places.PlaceResult = autocomplete.getPlace();
//verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
//set latitude, longitude and zoom
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.zoom = 12;
});
});
});
}
private setCurrentPosition() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 12;
});
}
}
onSubmit(){
this.notify.clear();
// this.notify.info('Wait...', {timeout: 0});
var header = {
'Content-Type': 'application/json'
}
return this.api.post('clientquotelanding', this.form, header).subscribe(
data => this.tokenHandler(data),
error => this.errorHandle(error)
);
}
client.component.html
<div class="col-xs-6">
<label for="quote_destination">Destination<span style="color:red;"> *</span></label>
<input type="text" autocorrect="off" autocapitalize="off" spellcheck="off" #search [formControl]="searchControl" class="form-control" id="quote_destination" placeholder="Destination" name="quote_destination" [(ngModel)]="form.quote_destination" #quote_destination="ngModel" [ngClass]="{'is-invalid' : quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || clientquoteForm.submitted)}" required>
<div class="form-feedback" *ngIf="quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || clientquoteForm.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="quote_destination.errors?.required"class="alert alert-danger">Destination is required.</div>
</div>
</div>
上面的代码是第55行。单击提交按钮时,出现此错误:
我不能仅仅理解错误的原因。如何解决此错误?