无法在iOS Ionic 3应用程序上点击Google自动填充列表中的项目

时间:2017-11-29 11:18:36

标签: ios angular google-maps-api-3 autocomplete ionic3

我正在使用Ionic 3来构建应用程序。这是我的护目镜地图自动完成api的代码

在Html中:

      <input id="pac-input" name="address" type="text" (keyup)="onKeyup()" [(ngModel)]="address" placeholder="Your street, building number..." class="name_txt" (click)="selectedSavedAddress = false" required />

在ts:

var input = document.getElementById('pac-input');
    var options = {
      types: ['geocode'], 
      componentRestrictions: {country: "SG"}
    };

    var autocomplete = new google.maps.places.Autocomplete(input, options);
     console.log(autocomplete, 'autocomplete');

    var local_this = this;
    google.maps.event.addListener(autocomplete, 'place_changed', () => {
      var place = autocomplete.getPlace();
      var address = place.formatted_address;
      var postal_code_find = _.find(place.address_components, (ac: any) => {
        return ac.types[0] === 'postal_code';
      });
      var postal_code = '';

      postal_code_find && (postal_code = postal_code_find.short_name);

      var latitude = place.geometry.location.lat();
      var longitude = place.geometry.location.lng();

      let coord = {
        lat: latitude, 
        lng: longitude
      };

      let address_data = {
        address: address,
        postal_code: postal_code || ''
      };

      local_this.extractAddressData(address_data);
      local_this.ref.detectChanges();
    });

它在浏览器和android中运行良好。在iOS中,我能够看到建议但无法点击它。我已经尝试了很多解决方案,例如为pac-item添加类,例如no-fastclick,needsclick。 没有什么工作,请帮助!

1 个答案:

答案 0 :(得分:0)

ionic cordova插件添加cordova-plugin-ionic-webview

npm install --save @ionic-native/ionic-webview@beta