时间戳

首页 > 解决方案 > 谷歌地图中未选择自动完成第一个和第二个选项

angular - 谷歌地图中未选择自动完成第一个和第二个选项

问题描述

我在角度使用谷歌地图 api。

按“enter”键无法选择自动完成的第一个和第二个选项。

它可以通过箭头选择，但该选择不显示在页面中。它显示为空。

我尝试更改为 newPackage.paOriginPlaceId 而不是从 cookie 返回的 origin 但它也无济于事。

谁能指出一个可能的解决方案？

粘贴在下面的代码：

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");

标签： angulargoogle-mapsautocomplete

解决方案

你需要改变风格：

::ng-deep.pac-container{
z-index: 6000 !important;
position: relative !important; 
margin-top: -1440px !important; 
}

margin-top: -1440px !important; As needed

推荐阅读