Question

我有这个我无法解决的错误，在ionic论坛和Stackoverflow上积极寻求，但是没有任何效果。我正在尝试在ion-search-bar中实现google place API。

我已经制作了本教程：https://github.com/angular-material-extensions/google-maps-autocomplete 预先感谢您的帮助。

tab1.page.html

<ion-searchbar placeholder="Adresse / Parcelle" autocomplete mode="md" class="searchbar"
    matInput
    matGoogleMapsAutocomplete
    [country]="de"
    (onAutocompleteSelected)="onAutocompleteSelected($event)"
    (onLocationSelected)="onLocationSelected($event)">
   </ion-searchbar>

tab1.module.ts

export class Tab1PageModule implements AfterViewInit {

  ngAfterViewInit() {
    let input = document.getElementById('autocomplete').getElementsByTagName('input')[0];
    let options = {componentRestrictions: {country: 'us'}};
    new google.maps.places.Autocomplete(input, options);
};
}

Answer 1

使用离子成分的getInputElement方法。它将返回您可以使用的本机ELEMENT。

在您的#mysearch上放置一个ionSearch，然后您需要对其进行定义：

@ViewChild("coladdress",{static:false}) searchElementRef: IonSearch; (remember to import IonSearch!!!)

在您的方法中：使用ionic提供的getInputElement（）来返回本机组件。

this.searchElementRef.getInputElement().then((input:HTMLInputElement)=>{
    var autocomplete = new google.maps.places.Autocomplete(input, {
    types: ["geocode"]


    });
)

您也可以将其用于离子输入！

如何解决：InvalidValueError：不是带有Ionic 4/5的HTMLInputElement实例

1 个答案: