Google maps api 3 角度5自动完成地理定位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

在我的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 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;
            }
         })
       })
     }      
    );      
  }
}