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

<template>
  <div class="map">
    <div class="mapLeftStyle">
      <el-input
        v-model="input"
        placeholder="请输入内容"
        class="controls"
        @input="chnageinput"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <div class="card" v-if="list.length > 0">
        <!-- <i class="el-icon-location fl mgr10" style="margin-top: 10px"></i> -->
        <div class="item" v-for="(item, index) in list" :key="index">
          <div @click="confirm(item)">
            <div class="title">{{ item.structured_formatting.main_text }}</div>
            <div class="address">
              {{ item.structured_formatting.secondary_text }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mapStyle">
      <div class="mapRightStyle">
        <div :style="googleMapStyle" class="googleMap" :id="mapID"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { Loader } from "@googlemaps/js-api-loader"; //引入
// 输入框模糊查询
let searchBox = undefined;
// 搜索地点和检索地点详细信息
let service = undefined;
// 对请求进行地理编码
let geocoder = undefined;
let marker = undefined;
export default {
  props: {
    //地图id
    mapID: {
      type: String,
      default: () => {
        return "googleMap";
      },
    },
    //谷歌地图样式
    googleMapStyle: {
      type: Object,
      default: () => {
        return {
          wdith: "100%",
          height: "100vh",
        };
      },
    },
    //谷歌地图配置
    mapOptions: {
      type: Object,
      default: () => {
        return {
          //为了关闭默认控件集,设置地图的disableDefaultUI的属性为true
          disableDefaultUI: false,
          // 启用缩放和平移
          gestureHandling: "greedy",
          panControl: true,
          zoomControl: true,
          scaleControl: true,
          //关闭街景
          streetViewControl: false,
        };
      },
    },
    //谷歌地图缩放级别
    zoom: {
      type: Number,
      default() {
        return 15;
      },
    },
    //谷歌地图图形path
    mapPath: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      map: {},
      BMap: {},
      input: "",
      googleMapCenter: {
        lng: "",
        lat: "",
      },
      //标记点
      marker: [],
      //图形实例
      graphicalExample: null,
      //图形路径经纬度
      graphicalPath: [],
      apiKey: "",
      // 模糊匹配数据
      list: [],
    };
  },
  created() {

  },
  mounted() {
    //通过浏览器的Geolocation API获取经纬度
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.showPosition);
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
    this.init();
  },
  methods: {
    showPosition(position) {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      console.log("Latitude: " + latitude);
      console.log("Longitude: " + longitude);
      this.googleMapCenter = {
        lng: longitude,
        lat: latitude,
      };
      this.init();
    },
    init() {
      this.$nextTick(() => {
        const loader = new Loader({
          apiKey: this.apiKey, //之前的key
          version: "weekly", //版本
          libraries: ["places", "drawing"], //插件库places为基础库 drawing为绘制工具库
          region: "Canada",
          language: "en",
        });
        const mapOptions = {
          center: {
            lat: this.googleMapCenter.lat * 1,
            lng: this.googleMapCenter.lng * 1,
          }, //中心点
          zoom: this.zoom, //缩放级别
          ...this.mapOptions, //其他配置
        };
        loader
          .load()
          .then((google) => {
            const map = new google.maps.Map(
              document.getElementById(this.mapID),
              mapOptions
            );
            this.googleMap = map;
            this.googleApi = google;
            // 自动完成请求 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service?hl=en
            searchBox = new google.maps.places.AutocompleteService();
            // 搜索地点和检索地点详细信息 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=en
            service = new google.maps.places.PlacesService(map);
            // 对请求进行地理编码 参考文档：https://developers.google.com/maps/documentation/javascript/reference/geocoder?hl=en
            geocoder = new google.maps.Geocoder();
            marker = new google.maps.Marker({
              map: map,
              position: {},
              draggable: true,
            });
            console.log(this.googleMap, "谷歌地图实例");
            console.log(this.googleApi, "谷歌地图api");
          })
          .catch((e) => {
            console.log(e);
          });
      });
    },
    GetMapLocation(results, status) {
      if (status === "OK") {
        console.log(results[0].geometry.location, results[0], results, "查验");
        this.googleMap.setCenter(results[0].geometry.location);
        marker.setPosition(results[0].geometry.location);
      } else {
        console.log("error");
      }
    },
    // 点击一行地址
    confirm(e) {
      // 搜索地点和检索地点详细信息
      service.getDetails({ placeId: e.place_id }, (event, status) => {
        if (status === "OK") {
          console.log(event.name, "===", event);
          this.input = event.name;
          // if (!event.name) return;
          let str = event.name;
          // 对请求进行地理编码
          geocoder.geocode({ address: str }, this.GetMapLocation);
        } else {
        }
      });
    },
    chnageinput(e) {
      console.log(e);
      searchBox.getPlacePredictions({ input: e }, (event, status) => {
        console.log(event, "===");
        if (status === "OK") {
          this.list = event || [];
          // place_id 后面有用，所以只保留存在place_id的数据
          this.list = this.list.filter((x) => x.place_id);
          console.log(event, "===", this.list);
        } else {
          this.list = [];
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner::placeholder {
  font-size: 16px;
  font-family: Hei;
  font-weight: 400;
  color: #000000;
  line-height: 26px;
}
::v-deep .popper__arrow {
  top: 0px !important;
}
::v-deep .el-input__inner {
  border-width: 1px;
  margin-top: 113px;
  position: relative;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #999999;
  border-bottom-width: 2px;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 0px;
}
::v-deep .el-input__icon {
  position: absolute;
  top: 109px;
  left: 382px;
  font-size: 30px;
  color: #292929;
}
.map {
  display: flex;
  .mapLeftStyle {
    width: 450px;
    min-width: 450px;
    min-height: 100vh;
    background: #ffffff;
    .controls {
      padding: 0 30px;
      height: 50px;
    }
    .card {
      padding: 0 30px;
      .item {
        cursor: pointer;
        padding: 20px 0;
        .title {
          font-size: 17px;
          font-family: Hei;
          font-weight: 400;
          color: #000000;
          line-height: 26px;
        }
        .address {
          font-size: 15px;
          font-family: Hei;
          font-weight: 400;
          color: #666666;
          line-height: 26px;
        }
      }
    }
    .mapLeftStyle_line {
      height: 1px;
      border: 1px solid #999999;
      margin: 0px 21px 0px 21px;
    }
  }
  .mapStyle {
    width: 100%;
    .mapLeftStyle {
      // width: 30%;
      margin-right: 5px;
      display: inline-block;
      .inputDUStyle {
        display: inline-block;
        width: 47%;
      }
      .inputDUStyle:first-child {
        margin-right: 1rem;
      }
      .inputDUStyle {
        margin-bottom: 1rem;
      }
    }
    .mapRightStyle {
      width: 100%;
      display: inline-block;
      vertical-align: top;
      .map {
        width: 100%;
        min-height: 100vh;
      }
    }
  }
}
</style>