如何使用 VuetifyJS Advanced slots 示例 Google Places API

Question

如何使用 VuetifyJS Advanced slots example with Google Places API？

<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>

我添加了 Google 地图地理编码 API、Google 地点 API Web 服务和 Google 地图 Javascript API 在 Google 开发者控制台中，并收到一个 API 密钥。

Answer 1

这里是如何将 Vuetify Autocompletes 组件与 Google 地方集成的说明 API:

1) 添加对 Google 地点的引用 API

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

2) 以下示例显示了如何使用 AutocompleteService class

的 getPlacePredictions 方法用位置填充 v-autocomplete 组件

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

Demo on CodePen

先决条件

Since Autocomplete is a feature of the Places library in the Maps JavaScript API, first ensure that the Places API is enabled in the Google Cloud Platform Console. Follow this instruction on how to enable Places API

如何使用 VuetifyJS Advanced slots 示例 Google Places API

How to use VuetifyJS Advanced slots example with Google Places API

vue.js

vuejs2

google-places-api

vuetify.js