Google Places AutoComplete API错误，&quot；Google未定义&quot；

我正在使用使用Vue的Google Places和Maps API搭建一个简单的原型。

在index.html中，我在网络选项卡中添加了脚本标记、库和API密钥，得到200个响应。

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

在App.vue中，我添加了以下

 <input ref="autocomplete" type="text" />
 ...
<script>
  export default {
  name: "App",
  data() {
   return {
     autocomplete: "",
    };
  },
  methods: {},
  mounted() {
    const center = { lat: 40.84498856765032, lng: -73.71060855293794 };
    // Create a bounding box with sides ~10km away from the center point
    const defaultBounds = {
    north: center.lat + 0.1,
    south: center.lat - 0.1,
    east: center.lng + 0.1,
    west: center.lng - 0.1,
  };
  const originAutoComplete = google.maps.places.AutoComplete(
    this.$refs["autocomplete"],
   {
     bounds: defaultBounds,
   }
 );
 originAutoComplete.addListener("place_changed", () => {
   console.log(originAutoComplete.getPlace());
 });

如何解决此错误？有没有办法在App.vue脚本标记中对其进行初始化？示例google developers youtube运行得很好，但我想在Vue上下文中实现它。 另一个注意事项是，我尝试在.google之前添加窗口，没有骰子。

更新%1

按照您的建议，我安装了googlemaps api loader和App.vue：

 <script>
   import { Loader } from "@googlemaps/js-api-loader";
   const loader = new Loader({
      apiKey: "AIzaSyCcm7G8xLfijhdYDyA6xD-4kNiNP_8GbY8",
      version: "weekly",
      libraries: ["places"],
     });

     export default {
      name: "App",
      data() {
        return {
        autocomplete: "",
      };
    },
    methods: {
      printData() {
        console.log(this.$refs["autocomplete"].value);
     },
   },
    async mounted() {
      let origin;
      const center = { lat:40.84498856765032, lng:-73.71060855293794 };
// Create a bounding box with sides ~10km away from the center point
     const defaultBounds = {
       north: center.lat + 0.1,
       south: center.lat - 0.1,
       east: center.lng + 0.1,
       west: center.lng - 0.1,
      };
     loader
      .load()
       .then((google) => {
        origin = new google.maps.places.Autocomplete(
          this.$refs["autocomplete"],
          {
            types: ["cities"],
            defaultBounds,
            fields: ["place_id", "geometry", "name"],
          }
        );
        origin.addListener("place_changed", () => {
        console.log(origin.getPlace());
       });
      })
       .catch((e) => {
         console.log(e);
       // do something
     });

现在此问题是未显示选项下拉列表。

---

解决方案

问题是您的Vue App JS在Google Maps JS之前加载。有一些选项：

1. 通过删除异步并推迟脚本，阻止在Google地图上加载您的应用程序。删除异步/延迟后，请确保脚本标记位于Vue JS之上。
2. 合并回调参数或仅检查VUE组件中是否存在window.google，并允许VUE在可用时进行更新。
3. 在Vue组件中使用@googlemaps/js-api-loader。有关合并的方式，请参阅Is `async/await` available in Vue.js `mounted`?。

我推荐选项3。