google-places-api - 在 Ionic 4 中放置来自 Google API 的数据刷新较晚

问题描述

我正在编写一个行程应用程序来通过谷歌地点 API 添加积分搜索。我可以成功获取地点列表并在控制台中列出。但数据将在 5 秒或更长时间后显示在屏幕上。在从谷歌检索到列表之后立即显示数据的任何提示？

html代码

<ion-content padding>
  <ion-item>
    <ion-input placeholder="{{ 'itinerary-search.name' | translate }}" [(ngModel)]="googleName" id="name"></ion-input>
    <ion-button slot="end" (click)="textSearch()">
      <ion-icon slot="icon-only" name="search"></ion-icon>
    </ion-button>
  </ion-item>
  <ion-card *ngFor="let placesServiceResult of placesServiceResults">
      <ion-item>
        <ion-label class="ion-text-wrap">{{ placesServiceResult.name }}</ion-label>
      </ion-item>
      <ion-item>
        <ion-label class="ion-text-wrap">{{ placesServiceResult.formatted_address }}</ion-label>
      </ion-item>
      <ion-item>
          <ion-button slot="start">
            <ion-icon slot="icon-only" name="map"></ion-icon>
          </ion-button>
          <ion-button slot="end">
            <ion-icon slot="icon-only" name="add"></ion-icon>
          </ion-button>    
      </ion-item>
  </ion-card>
  <ion-fab horizontal="end" (click)="scrollToTop()">
    <ion-fab-button size="small"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
  </ion-fab>
  <div #map id="map" style="display: none;"></div>
</ion-content>

输入姓名并点击搜索按钮后，卡片将在 5 秒或更长时间后显示

文本搜索功能

  async textSearch() {
    console.log('ItinerarySearchPage textSearch');

    const queryRequest = {
      query: this.googleName
    };
    this.placesServiceResults = [];

    this.placesServiceQuery = new google.maps.places.PlacesService(this.googleMap);
    await this.placesServiceQuery.textSearch(queryRequest, async (queryResults, queryStatus) => {
      console.log('ItinerarySearchPage textSearch queryStatus=', queryStatus);
      console.log('ItinerarySearchPage textSearch queryResults=', queryResults);
      if (queryStatus === google.maps.places.PlacesServiceStatus.OK) {
        await queryResults.forEach(element => {
          const placeResult: PlaceResult = {
            formatted_address: null,
            geometry_location_lat: null,
            geometry_location_lng: null,
            icon: null,
            name: null,
            place_id: null
          };
          const formattedAddress = element.formatted_address;
          const geometryLocationLat = element.geometry.location.lat();
          const geometryLocationLng = element.geometry.location.lng();
          const icon = element.icon;
          const name = element.name;
          const placeId = element.place_id;

          placeResult.formatted_address = formattedAddress;
          placeResult.geometry_location_lat = geometryLocationLat;
          placeResult.geometry_location_lng = geometryLocationLng;
          placeResult.icon = icon;
          placeResult.name = name;
          placeResult.place_id = placeId;
          this.placesServiceResults.push(placeResult);
        });
        await console.log('ItinerarySearchPage textSearch placesServiceResults=', this.placesServiceResults);
      } else {
        if (this.storageLanguage === Language.english) {
          this.toastProvider.presentWarningToast(ToastMessage.enSearchPlaceQueryFail);
        } else {
          this.toastProvider.presentWarningToast(ToastMessage.zhSearchPlaceQueryFail);
        }
      }
    });
  }

标签： google-places-apiionic4

google-places-api - 在 Ionic 4 中放置来自 Google API 的数据刷新较晚

问题描述

解决方案

推荐阅读