google 地图中未选择自动完成第一个和第二个选项
Autocomplete first and second options not chosen in google maps
我在 angular 中使用 google 地图 api。
自动完成的第一个和第二个选项不能通过按“回车”键来选择。
可以通过箭头选择,但页面不显示选择。它显示为空。
我已经尝试更改为 newPackage.paOriginPlaceId 而不是从 cookie 返回的原点,但它也无济于事。
谁能指出我可能的解决方案?
下面粘贴的代码:
html
<div class="box4 sb13"> {{origin}} </div>
ts
@Component({
selector: 'app-order-delivery',
templateUrl: './order-delivery.component.html',
styleUrls: ['./order-delivery.component.css']
})
export class OrderDeliveryComponent implements OnInit, AfterViewChecked {
@ViewChild('scrollMe', { static: false }) public myScrollContainer: ElementRef;
@ViewChild('target', { static: false }) target: ElementRef;
@ViewChild('searchModalTarget', { static: false }) searchModalTarget: ElementRef
@ViewChild('search', { static: false }) public searchElement: ElementRef;
@ViewChild('places', { static: false }) places: GooglePlaceDirective;
@Output() address: EventEmitter<string> = new EventEmitter<string>();
userCode: string;
public origin: string;
public destination: string;
weekday: number[] = [1, 2, 3, 4, 5, 6];
lat: string;
handleOriginChange(a: Address) {
this.getAddress(a.place_id).subscribe(
res => {
this.stringPlace = JSON.parse(res).results[0].formatted_address
this.origin = this.stringPlace;
this.newPackage.paOriginPlaceId = this.origin;
}, err => {
alert("There were wrong details");
});
if (!(a.geometry.location.lng() == 0 || a.geometry.location.lat() == 0)) {
this.newPackage.paOriginX = a.geometry.location.lat();
this.newPackage.paOriginY = a.geometry.location.lng();
}
}
newPackage: Package = new Package();
public appearance = Appearance;
public zoom: number;
public latitude: number;
public longitude: number;
public searchObj: SearchResponse;
public searchResultsObj;
public searchResultsArr;
public searchInput: boolean = true;
public stringPlace: string;
public listquestionChat: Array<number>;
public i: number = 0;
durationInSeconds = 5;
displayedColumns: string[] = ['Origin', 'Destination', 'Minutes of walk'];
ELEMENT_DATA = this.searchResultsArr;
constructor(private renderer: Renderer, private modalService: NgbModal, private router: Router, private loggedU: LoginCredentialsService, private packageService: PackageSendService, private HTTP: HttpClient, private _snackBar: MatSnackBar) { }
closeResult = '';
onLocationOriginSelected(location: Location) {
this.newPackage.paOriginX = location.latitude;
this.newPackage.paOriginY = location.longitude;
}
keyDownFunction(event) {
sessionStorage.setItem("index", this.i.toString());
switch (this.i) {
case 2: sessionStorage.setItem("paOrigin", this.newPackage.paOriginPlaceId);
sessionStorage.setItem("paOriginX", this.newPackage.paOriginX.toString())
sessionStorage.setItem("paOriginY", this.newPackage.paOriginY.toString())
break;
case 3: sessionStorage.setItem("paDestination", this.newPackage.paDestinationPlaceId);
}
}
scrollToBottom(): void {
try {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
} catch (err) { }
}
ngAfterViewChecked() {
this.scrollToBottom();
}
getAddress(place_id: string) {
return this.HTTP.get("https://maps.googleapis.com/maps/api/geocode/json?place_id=" + place_id + "&language=en&key=AIzaSyBGqtyM_aB8AfLONbkd6Ajz0I8XP-ENtO0", { responseType: 'text' });
}
ngOnInit() {
this.scrollToBottom();
this.newPackage.paOriginPlaceId = sessionStorage.getItem("paOrigin");
this.newPackage.paOriginX = parseFloat(sessionStorage.getItem("paOriginX"));
this.newPackage.paOriginY = parseFloat(sessionStorage.getItem("paOriginY"));
this.origin = sessionStorage.getItem("paOrigin");
你需要改变风格:
::ng-deep.pac-container{
z-index: 6000 !important;
position: relative !important;
margin-top: -1440px !important;
}
margin-top: -1440px !important; As needed
我在 angular 中使用 google 地图 api。
自动完成的第一个和第二个选项不能通过按“回车”键来选择。
可以通过箭头选择,但页面不显示选择。它显示为空。
我已经尝试更改为 newPackage.paOriginPlaceId 而不是从 cookie 返回的原点,但它也无济于事。
谁能指出我可能的解决方案?
下面粘贴的代码:
html
<div class="box4 sb13"> {{origin}} </div>
ts
@Component({
selector: 'app-order-delivery',
templateUrl: './order-delivery.component.html',
styleUrls: ['./order-delivery.component.css']
})
export class OrderDeliveryComponent implements OnInit, AfterViewChecked {
@ViewChild('scrollMe', { static: false }) public myScrollContainer: ElementRef;
@ViewChild('target', { static: false }) target: ElementRef;
@ViewChild('searchModalTarget', { static: false }) searchModalTarget: ElementRef
@ViewChild('search', { static: false }) public searchElement: ElementRef;
@ViewChild('places', { static: false }) places: GooglePlaceDirective;
@Output() address: EventEmitter<string> = new EventEmitter<string>();
userCode: string;
public origin: string;
public destination: string;
weekday: number[] = [1, 2, 3, 4, 5, 6];
lat: string;
handleOriginChange(a: Address) {
this.getAddress(a.place_id).subscribe(
res => {
this.stringPlace = JSON.parse(res).results[0].formatted_address
this.origin = this.stringPlace;
this.newPackage.paOriginPlaceId = this.origin;
}, err => {
alert("There were wrong details");
});
if (!(a.geometry.location.lng() == 0 || a.geometry.location.lat() == 0)) {
this.newPackage.paOriginX = a.geometry.location.lat();
this.newPackage.paOriginY = a.geometry.location.lng();
}
}
newPackage: Package = new Package();
public appearance = Appearance;
public zoom: number;
public latitude: number;
public longitude: number;
public searchObj: SearchResponse;
public searchResultsObj;
public searchResultsArr;
public searchInput: boolean = true;
public stringPlace: string;
public listquestionChat: Array<number>;
public i: number = 0;
durationInSeconds = 5;
displayedColumns: string[] = ['Origin', 'Destination', 'Minutes of walk'];
ELEMENT_DATA = this.searchResultsArr;
constructor(private renderer: Renderer, private modalService: NgbModal, private router: Router, private loggedU: LoginCredentialsService, private packageService: PackageSendService, private HTTP: HttpClient, private _snackBar: MatSnackBar) { }
closeResult = '';
onLocationOriginSelected(location: Location) {
this.newPackage.paOriginX = location.latitude;
this.newPackage.paOriginY = location.longitude;
}
keyDownFunction(event) {
sessionStorage.setItem("index", this.i.toString());
switch (this.i) {
case 2: sessionStorage.setItem("paOrigin", this.newPackage.paOriginPlaceId);
sessionStorage.setItem("paOriginX", this.newPackage.paOriginX.toString())
sessionStorage.setItem("paOriginY", this.newPackage.paOriginY.toString())
break;
case 3: sessionStorage.setItem("paDestination", this.newPackage.paDestinationPlaceId);
}
}
scrollToBottom(): void {
try {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
} catch (err) { }
}
ngAfterViewChecked() {
this.scrollToBottom();
}
getAddress(place_id: string) {
return this.HTTP.get("https://maps.googleapis.com/maps/api/geocode/json?place_id=" + place_id + "&language=en&key=AIzaSyBGqtyM_aB8AfLONbkd6Ajz0I8XP-ENtO0", { responseType: 'text' });
}
ngOnInit() {
this.scrollToBottom();
this.newPackage.paOriginPlaceId = sessionStorage.getItem("paOrigin");
this.newPackage.paOriginX = parseFloat(sessionStorage.getItem("paOriginX"));
this.newPackage.paOriginY = parseFloat(sessionStorage.getItem("paOriginY"));
this.origin = sessionStorage.getItem("paOrigin");
你需要改变风格:
::ng-deep.pac-container{
z-index: 6000 !important;
position: relative !important;
margin-top: -1440px !important;
}
margin-top: -1440px !important; As needed