Google地方样式自动完成不起作用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google地方样式自动完成不起作用相关的知识,希望对你有一定的参考价值。

我正在使用Angular 9和Ionic 5,并且我正在使用Google Places自动完成输入地址。自动完成工作正常,并且由于this,我设法在浏览器上编辑了样式。然后,我进入样式表(scss),将这些样式放入各自的类(pac-容器,pac-item,pac-icon等)中,这些样式不会像我在scss文件中指定的那样显示。如果检查浏览器,则pac类中没有我的样式。我的代码如下:

profile.page.html

<ion-item class="br-5 mt">
   <ion-icon name="home" slot="start" class="ion-align-self-center" color="primary"></ion-icon>
   <ion-input id="googlePlaces" placeholder="Dirección" formControlName="address" required type="text"></ion-input>
</ion-item>

profile.page.scss

.pac-container{
    font-family: 'Open Sans';
}

.pac-item{
    margin-left:10px;
}

.pac-icon{
    display:none;
}

profile.page.ts

declare var google: any;
export class ProfilePage implements OnInit {
constructor(){}
ionViewDidEnter() {
    this.activeGooglePlace();
  }
activeGooglePlace() {

    let input = document.getElementById('googlePlaces').getElementsByTagName('input')[0];
    let autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
    autocomplete.setComponentRestrictions({ 'country': ['cl'] });
    google.maps.event.addListener(autocomplete, 'place_changed', () => {
      let place = autocomplete.getPlace();
      this.profileForm.controls.latitude.setValue(place.geometry.location.lat());
      this.profileForm.controls.longitude.setValue(place.geometry.location.lng());
      this.profileForm.controls.address.setValue(place.formatted_address);
    });
  } 
}

[我什至尝试阅读手机上的apk,因为我看到有些人无法使其在localhost上运行。但是仍然没有用。关于如何解决这个问题的任何想法?预先感谢。

答案

我能够通过将所有这些类添加到主题变量.scss中来进行更改。真的很ham愧,我一开始无法检查那个。

以上是关于Google地方样式自动完成不起作用的主要内容,如果未能解决你的问题,请参考以下文章

React/Material UI - Google Places 自动完成下拉菜单有时不起作用

邮政编码的 Google 地方自动填充

谷歌地图API地方自动完成getPlace()不起作用

自动完成 Google Map V3 无法自定义的地方?

Angular 4:Google Places 自动完成 API 不起作用

Vue-google-map 自动完成两种方式绑定不起作用