谷歌地方自动完成的样式不起作用

Posted 2023-03-16

【中文标题】谷歌地方自动完成的样式不起作用

【英文标题】：Styles for google places autocomplete not working

【发布时间】：2020-09-16 08:48:07

【问题描述】：

我正在开发 Angular 9 和 Ionic 5，并且我正在使用 google places 自动完成来输入地址。自动完成工作正常，感谢this，我设法在浏览器上编辑了样式。然后我转到我的样式表 (scss) 将这些样式放入它们各自的类中（pac-container、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 上运行。但是，仍然没有工作。关于如何解决这个问题的任何想法？提前致谢。

【参考方案1】：

我可以通过在我的主题 variables.scss 中添加所有这些类来更改它。真的很惭愧，我一开始没能检查出那个。