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 自动完成下拉菜单有时不起作用