位置預測和.getPlace()使用谷歌地圖加載器進行地點自動完成在Vue中不起作用

我使用 vue cli 啟動了一個 Vue 2 應用程式。當我輸入地址時，我沒有看到下拉串列中填充任何建議。在 newtwork 選項卡中，我看到AutocompletionService.GetPredictions呼叫觸發并且頁面加載時沒有錯誤。

在我之前的問題stackoverflow 中，我被提示使用谷歌地圖加載器npm，我這樣做了。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <input
      id="detailedLocation"
      ref="autocomplete"
      type="text"
      v-model="address"
      @input="locatorInfo"
    />
    <ul>
      <li v-for="(result, i) in searchResults" :key="i">
        {{ result }} // list of all places
      </li>
    </ul>
  </div>
</template>

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

export default {
  name: "App",
  data() {
    return {
      info: null,
      searchResults: [],
      address: "",
    };
  },
  async mounted() {
    let location;
    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 input = document.getElementById("detailedLocation");
    const options = {
      types: ["address"], // the error was type: cities
      bounds: defaultBounds,
      fields: ["place_id", "geometry", "name", "address_components"],
    };
    loader
      .load()
      .then((google) => {
        location = new google.maps.places.Autocomplete(input, options);

        location.addListener(
          // document.getElementById("detailedLocation"),
          "place_changed",
          onPlaceChanged
        );
        console.log(location);
      })
      .catch((e) => {
        console.log(e);
        // do something
      });
    const onPlaceChanged = () => {
      const place = location.getPlace();
      console.log(location, place, "LINE 79");

      if (!place.geometry) {
        document.getElementById("detailedLocation").placeholder =
          "Enter a place";
      } else {
        document.getElementById("detailedLocation").innerHTML =
          place.formatted_address;
        console.log(place.formatted_address, "line 60");
      }
    };
  },
  methods: {
    locatorInfo() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position) => {
          console.log(position.coords.latitude, position.coords.longitude);
        });
      }
    },
    printData() {
      this.displaySuggestions();
      console.log(this.$refs["autocomplete"].value);
    },
    displaySuggestions(predictions, status) {
      if (status !== window.google.maps.places.PlacesServiceStatus.OK) {
        this.searchResults = [];
        return;
      }
      this.searchResults = predictions.map(
        (prediction) => prediction.description
      );
    },
  },
};
</script>

輸入并提交地址時，也沒有錯誤。我不確定我做錯了什么。我關注了谷歌開發者視頻，谷歌放置了自動完成小部件，并仔細檢查了檔案AutocompleteService 類。如上所述，網路呼叫是對 AutocompleteService 類，而不僅僅是 Autocomplete（因為這是一個小部件）。我的加載程式正在呼叫自動??完成的建構式。為什么是這樣？我如何把它連接起來作業？

編輯

我添加了一個代碼框并將代碼從定義 onPlaceChanged 修改為檔案中的匿名函式，檔案示例

uj5u.com熱心網友回復：

一切都是正確的，錯誤在選項物件中。而不是 type: city ，它應該是 type: address （至少出于我的目的）。使用@googlemaps/js-api-loader效果很好，是在 index.html 中添加腳本標記的絕佳解決方案。為了參考后面的內容，也可以只使用檔案中看到的匿名函式，自動完成檔案示例。另外，要注意錯別字。輸入“自動完成”而不是“自動完成”非常容易。api loader 的檔案非常稀疏，我仍然不確定是否有回呼欄位。除此之外，這個例子應該讓你繼續。

標籤：

上一篇：Nuxt Algolia-谷歌地圖不更新即時搜索的新結果

下一篇：如何以編程方式獲取Maven依賴樹