加载 Google 将 api 放入组件库(没有 index.html 文件)
Load Google places api into component library (no index.html file)
目前在我的代码中“places”未定义。
这是在其他应用程序使用的组件库中,因此它自己无法访问 Index.html 文件。
.ts代码
import { MapsAPILoader } from '@agm/core';
import { Component, ElementRef, Inject, NgZone, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import {} from 'googlemaps';
@Component({
selector: 'lib-google-search',
templateUrl: './google-search.component.html',
styleUrls: ['./google-search.component.scss']
})
export class GoogleSearchComponent implements OnInit {
zoom: number = 0;
searchElementRef: ElementRef;
searchControl:FormControl;
latLong:any;
google:any;
@ViewChild('search',{static:false}) Component
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone,
private elementRef:ElementRef
) { }
ngOnInit() {
this.searchControl = new FormControl();
this.mapsAPILoader.load().then(() => {
const autoComplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: [],
componentRestrictions: {'country': 'USA'}
});
autoComplete.addListener('place_changed', () => {
this.ngZone.run(() => {
const place: google.maps.places.PlaceResult = autoComplete.getPlace();
if (place.geometry === undefined || place.geometry === null){
return;
}
const latlong = {
latitude: place.geometry.location.lat,
longitude : place.geometry.location.lng
}
this.latLong.push(latlong);
this.searchControl.reset();
});
})
});
}
}
我需要一些不使用 index.html 文件来加载 places 库的方法
非常感谢任何帮助!
我最终使用 Angular Google 地图 (AGM) 加载了这个库,它运行良好。
import { AgmCoreModule } from '@agm/core';
AgmCoreModule.forRoot({
libraries:['places'],
apiKey: 'your googleapi key'
}),
您可以在此处获取此库。
https://angular-maps.com/
目前在我的代码中“places”未定义。 这是在其他应用程序使用的组件库中,因此它自己无法访问 Index.html 文件。
.ts代码
import { MapsAPILoader } from '@agm/core';
import { Component, ElementRef, Inject, NgZone, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import {} from 'googlemaps';
@Component({
selector: 'lib-google-search',
templateUrl: './google-search.component.html',
styleUrls: ['./google-search.component.scss']
})
export class GoogleSearchComponent implements OnInit {
zoom: number = 0;
searchElementRef: ElementRef;
searchControl:FormControl;
latLong:any;
google:any;
@ViewChild('search',{static:false}) Component
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone,
private elementRef:ElementRef
) { }
ngOnInit() {
this.searchControl = new FormControl();
this.mapsAPILoader.load().then(() => {
const autoComplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: [],
componentRestrictions: {'country': 'USA'}
});
autoComplete.addListener('place_changed', () => {
this.ngZone.run(() => {
const place: google.maps.places.PlaceResult = autoComplete.getPlace();
if (place.geometry === undefined || place.geometry === null){
return;
}
const latlong = {
latitude: place.geometry.location.lat,
longitude : place.geometry.location.lng
}
this.latLong.push(latlong);
this.searchControl.reset();
});
})
});
}
}
我需要一些不使用 index.html 文件来加载 places 库的方法
非常感谢任何帮助!
我最终使用 Angular Google 地图 (AGM) 加载了这个库,它运行良好。
import { AgmCoreModule } from '@agm/core';
AgmCoreModule.forRoot({
libraries:['places'],
apiKey: 'your googleapi key'
}),
您可以在此处获取此库。 https://angular-maps.com/