Question

所以我有一个搜索框，然后单击“输入”，我想显示我刚刚选择的地方的照片。我真的不知道该怎么做，在互联网上进行了一些搜索之后，我发现了getPlaceDetails API。这是我的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test-jest</title>
    <script type="text/JavaScript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>

  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

我的App.vue：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/search">Search</router-link>
    </div>
    <router-view/>
  </div>
</template>

最后，超级明星，我的搜索组件：

<template>
  <div id="search-wrapper">
    <div>
    <input id="search-input" ref="vue_google_autocomplete"
        placeholder="Search"
        class="search-location"
        onfocus="value = ''"
        type="text" />
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.autocomplete = new google.maps.places.Autocomplete(
      (this.$refs.vue_google_autocomplete),
      {types: ['geocode'],componentRestrictions: {country: "us"}}
    );
      this.autocomplete.addListener('place_changed', () => {
      let place = this.autocomplete.getPlace();
      let ac = place.address_components;
      let lat = place.geometry.location.lat();
      let lon = place.geometry.location.lng();
      var city = ac[0]["short_name"];
      var country = ac[3]["long_name"];

      console.log(`You're going to ${city}, which is in ${country}`);
      console.log(ac);
    });
  }
  }
</script>

有人可以帮我显示我要找的地方的照片吗？

Answer 1

在此API中，场所被定义为场所，地理位置或重要景点。大多数道路等都不会返回图像。

来源：https://developers.google.com/places/web-service/intro

检查您的回复是否包含photos[]数组，如果照片与上面定义的位置匹配，则应该在其中。

如何从getPlaceDetails获取照片的地方？在VUE中

1 个答案: