如何让Google Places搜索栏与Ionic 4/ Angular 8和agm-core协同工作？

Question

我正在使用agm-core组件在我的应用程序中有谷歌地图。地图显示正常。在我的app.module.ts中，我有以下内容：

AgmCoreModule.forRoot({
apiKey: '', // API key is defined here.
libraries: ['places', 'drawing', 'geometry']  }) 

在我的html中，我有：

<ion-header></ion-header>
<ion-toolbar>

</ion-toolbar>
<div class="form-group">
<label>Enter address</label>
<input type="text" class="form-control
(keydown.enter)="$event.preventDefault()" placeholder="Search Nearest
Location" autocorrect="off" autocapitalize="off" spellcheck="off"
type="text" #search>
</div>
<agm-map 
[latitude]="latitude" 
[longitude]="longitude" 
[zoom]="zoom" >
 <agm-marker 
[latitude]="latitude" 
 [longitude]="longitude"></agm-marker>
</agm-map>
<h5>Address: {{address}}</h5>
<div>Latitude: {{latitude}}</div>
<div>Longitude: {{longitude}}</div>

我的ts文件是：

    export class SiteDetailsComponent  implements OnInit {
  title = 'AGM project';
  latitude: number;
  longitude: number;
  zoom: number;

  address: string;
  private geoCoder;

  @ViewChild('search', { static: true })
  public searchElementRef: ElementRef;
constructor(

    private router: Router,
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone

  ) {}
ngOnInit() {
    // load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
      this.setCurrentLocation();
      this.geoCoder = new google.maps.Geocoder();

      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: ['address']
      });

      autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {
          // get the place result
          const 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;
        });
      });
    });
  }
  // Get Current Location Coordinates
  private setCurrentLocation() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.zoom = 8;
        this.getAddress(this.latitude, this.longitude);
      });
    }
  }

  getAddress(latitude, longitude) {
    this.geoCoder.geocode({ location: { lat: latitude, lng: longitude } }, (results, status) => {
      if (status === 'OK') {
        if (results[0]) {
          this.zoom = 12;
          this.address = results[0].formatted_address;
        } else {
      }
      } else {
      }

    });
  }

搜索栏根本不会弹出位置。不会抛出错误。也许这个问题来自于新版本的@ViewChild自带的angular 8。也有可能使用Ionic 4访问DOM是不同的？

有什么办法能帮我一下吗？

亲切的问候

Answer 1

我没有使用agm-core组件，但我认为其逻辑将类似于我用来解决问题的逻辑。这是一个使用“ionic”的angular 7应用程序："^5.4.4“。

html代码如下所示：

<ion-item>
  <ion-label class="ion-item-small" position="floating">Property Address</ion-label>
  <ion-input formControlName="autocomplete_input" id="autocomplete_input"
    autocomplete="off" (keyup)="keyUpHandler()">
  </ion-input>
</ion-item>

然后，为了处理自动补全，将执行此方法：

keyUpHandler(){
  if(this.your_form.get('autocomplete_input').value.length > 0)
{
  let inputfield = 
  document.getElementById('autocomplete_input').getElementsByTagName('input')[0];
  let autocomplete = new google.maps.places.Autocomplete((inputfield), {
    types: ['address'],
    componentRestrictions: {country: 'us'},
  });    
  //the below code has same behaviour as the working solution

  // autocomplete.addListener('place_changed', () => {
  //   this.zone.run(() => {
  //     const place = autocomplete.getPlace();
  //     console.log(place)
  //   });
  // });

  google.maps.event.addListener(autocomplete ,`place_changed`, () => {
    var place = autocomplete.getPlace();
    console.log(place)
 //your code goes here
  });
} 

这是我们唯一要做的事情，我们可以用以下格式访问google-api地址：

Output Json