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

                                                                      {{ item.structured_formatting.main_text }}                          {{ item.structured_formatting.secondary_text }}                                                                      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 = [];        }      });    },  },};::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;      }    }  }}