如何使用VuetifyJS高级插槽示例与Google Places API

Question

如何使用VuetifyJS高级插槽示例与Google Places API

4

如何使用VuetifyJS的高级插槽示例与Google Places API配合使用？ CodePen示例

<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开发者控制台中添加了Google Maps Geocoding API、Google Places API Web Service和Google Maps Javascript API，并获得了API密钥。

- Tom

你想从Google Places API中显示什么？只是地点的名称还是其他内容？ - Umair Malhi

只有地点（仅限文本） - Tom

1

使用AXIOS获取数据并直接添加API密钥将会暴露您的API密钥，此外浏览器还会根据CORS策略阻止该操作。因此，您需要添加服务器端代码作为代理服务器，以从Google Places API获取数据。 - Umair Malhi

另外，我没有Google Places API的任何API密钥，否则我会相应地更新提供的CodePen中的代码。 - Umair Malhi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vadim Gremyachev · Accepted Answer

以下是如何将Vuetify Autocompletes组件与Google Places API集成的说明：

1）添加对Google Places API的引用

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

2）以下示例展示了如何使用AutocompleteService类的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;
  });
}

CodePen上的演示

先决条件

自动完成是Maps JavaScript API中Places库的一个功能，因此，请先确保已在Google Cloud Platform Console中启用了Places API。请按照这些说明操作以启用Places API。