Vuetify 사용 방법Google Places API를 사용한 JS Advanced 슬롯 예제

Vuetify 사용 방법Google Places API를 사용한 JS Advanced 슬롯 예제

Vuetify 사용 방법Google Places API를 사용한 JS Advanced 슬롯 예시?

코드펜 예제

<v-autocomplete
  v-model="model"
  :items="items"
  :loading="isLoading"
  :search-input.sync="search"
  chips
  clearable
  hide-details
  hide-selected
  item-text="name"
  item-value="symbol"
  label="Search for a coin..."
  solo
>
  <template slot="no-data">
    <v-list-tile>
      <v-list-tile-title>
        Search for your favorite
        <strong>Cryptocurrency</strong>
      </v-list-tile-title>
    </v-list-tile>
  </template>
  <template
    slot="selection"
    slot-scope="{ item, selected }"
  >
    <v-chip
      :selected="selected"
      color="blue-grey"
      class="white--text"
    >
      <v-icon left>mdi-coin</v-icon>
      <span v-text="item.name"></span>
    </v-chip>
  </template>
  <template
    slot="item"
    slot-scope="{ item, tile }"
  >
    <v-list-tile-avatar
      color="indigo"
      class="headline font-weight-light white--text"
    >
      {{ item.name.charAt(0) }}
    </v-list-tile-avatar>
    <v-list-tile-content>
      <v-list-tile-title v-text="item.name"></v-list-tile-title>
      <v-list-tile-sub-title v-text="item.symbol"></v-list-tile-sub-title>
    </v-list-tile-content>
    <v-list-tile-action>
      <v-icon>mdi-coin</v-icon>
    </v-list-tile-action>
  </template>
</v-autocomplete>

구글 개발자 콘솔에 구글 맵스 지오코딩 API, 구글 플레이스 API 웹 서비스, 구글 맵스 자바스크립트 API를 추가하고 API Key를 받았다.

다음은 Vuetify Autocompletes 구성 요소를 Google Places API와 통합하는 방법:

1) Google Places API에 참조 추가

<script src="https://maps.googleapis.com/maps/api/js?&libraries=places&key=--KEY--"></script>

2) 다음 예제는 채우는 방법을 보여준다.v-autocomplete다음을 사용하는 장소 구성 요소getPlacePredictions수업 방법

search(val) {
  if (!val) {
      return;
  }

  this.isLoading = true;

  const service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: val }, (predictions, status) => {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      return;
    }

    this.items = predictions.map(prediction => {
      return {
        id: prediction.id,
        name: prediction.description,
      };
    });

    this.isLoading = false;
  });
}

CodePen에 대한 데모

전제조건

자동 완성은 맵 JavaScript API에 있는 플레이스 라이브러리의 기능이기 때문에 먼저 플레이스 API가 Google 클라우드 플랫폼 콘솔에서 활성화되어 있는지 확인하십시오.플레이스 API를 사용 가능으로 설정하는 방법은 다음 지침을 따르십시오.

참조URL: https://stackoverflow.com/questions/53874466/how-to-use-vuetifyjs-advanced-slots-example-with-google-places-api