Google maps api 3 角度5自动完成地理定位npm安装不工作
在我的Angular 5项目中,我想实现google自动完成地理定位。 我得到了一些npm模块的参考资料:- 根据他们的指导,当我要安装该模块时,我面临一些警告: 安装命令:-Google maps api 3 角度5自动完成地理定位npm安装不工作,google-maps-api-3,angular5,Google Maps Api 3,Angular5,在我的Angular 5项目中,我想实现google自动完成地理定位。 我得到了一些npm模块的参考资料:- 根据他们的指导,当我要安装该模块时,我面临一些警告: 安装命令:- npm install --save ng4-geoautocomplete 警告:- ***npm WARN ngx-slideshow@0.1.0 requires a peer of @angular/core@^4.0.0 but none is installed. You must install
npm install --save ng4-geoautocomplete
警告:-
***npm WARN ngx-slideshow@0.1.0 requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-slideshow@0.1.0 requires a peer of @angular/common@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng4-geoautocomplete@0.1.0 requires a peer of @angular/core@>=2.0.0 <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ ng4-geoautocomplete@0.1.0
added 68 packages in 96.971s***
我为什么要面对这个问题?解决办法是什么
有没有其他方法来实现谷歌自动完成地理定位?是的
npm install @agm/core --save-dev
npm install @types/googlemaps --save-dev
app.module.ts
import {AgmCoreModule} from '@agm/core'
.
.
.
imports: [
.
.
.
AgmCoreModule.forRoot({
apiKey: 'your api key',
libraries: ['places']
}),
.
.
.
]
在html中
<div>
<input type="text" placeholder="Search for location" autocorrect="off" name="" spellcheck="off" #autoSearch/>
</div>
我宁愿使用AGM库,而不仅仅是您正在使用的自动完成功能,因为自动完成功能只为您提供是否可以使用AGM渲染带有标记的谷歌地图的完整功能
现在,
要自行安装依赖项以修复警告,您可以参考以下问题:
<div>
<input type="text" placeholder="Search for location" autocorrect="off" name="" spellcheck="off" #autoSearch/>
</div>
import {Component, ViewChild, ElementRef, NgZone, OnInit} from '@angular/core'
import { MapsAPILoader } from '@agm/core';
import {} from @types/googlepmaps;
.
.
.
export class YourComponent implements OnInit {
@ViewChild('autoSearch') public searchElement: ElementRef;
consturctor (private mapsAPILoader: MapsAPILoader , private ngZone : NgZone )
{}
ngOnInit() {
this.mapsAPILoader.load().then(
() => {
let autocomplete = new
google.maps.places.Autocomplete(this.searchElement.nativeElement,
{types:["address"]});
autocomplete.addListener("place_changed", ()=> {
this.ngZone.run(()=>{
let place: google.maps.places.PlaceResult =
autocomplete.getPlace();
if(place.geometry === undefined || place.geometry === null) {
return;
}
})
})
}
);
}
}