vue 使用谷歌地图 @googlemaps/js-api-loader 进行模糊搜索

<template>
  <div>
    <GMapMap
      :map-options="{
        center: { lat: 0, lng: 0 },
        zoom: 1
      }"
      style="width: 100%; height: 500px"
    >
    </GMapMap>
  </div>
</template>
 
<script>
import { Loader } from "@googlemaps/js-api-loader";
import { gmapApi } from "vue2-google-maps";
 
export default {
  data() {
    return {
      // 设置谷歌地图API的密钥
      googleMapsApiKey: process.env.VUE_APP_GOOGLE_MAPS_API_KEY,
      // 设置模糊搜索的选项
      placesOptions: {
        location: { lat: () => 0, lng: () => 0 },
        radius: 200 * 1000,
        type: ["restaurant"]
      },
      loader: null
    };
  },
  mounted() {
    this.loader = new Loader({
      apiKey: this.googleMapsApiKey,
      version: "weekly",
      libraries: ["places"]
    });
 
    this.loader
      .load()
      .then(() => {
        const autocomplete = new google.maps.places.AutocompleteService();
 
        autocomplete.getPlacePredictions({ ...this.placesOptions }, predictions => {
          console.log(predictions);
        });
      })
      .catch(e => {
        console.error(e);
      });
  }
};
</script>

在这个代码实例中，我们首先在data函数中定义了必要的数据，包括谷歌地图API的密钥和模糊搜索的选项。然后，在mounted生命周期钩子中，我们创建了一个Loader实例，并在谷歌地图API加载完成后，使用AutocompleteService进行模糊搜索，并处理了可能出现的错误。这个例子展示了如何在Vue应用中使用谷歌地图API进行地点模糊搜索。