vue 项目 使用百度地图 检索模糊查询地点

import BaiduMap from 'vue-baidu-map'
import Vue from 'vue'
Vue.use(BaiduMap, {
  ak: ''
})

<template>
  <div class="map" v-if="true">
    <div class="mapLeftStyle">
      <div>{{ province }}</div>
      <el-autocomplete
        style="width: 100%"
        popper-class="autoAddressClass"
        :popper-append-to-body="false"
        v-model="search"
        :fetch-suggestions="querySearchAsync"
        :trigger-on-focus="false"
        placeholder="输入地址查找门店"
        @select="handleSelect"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <template slot-scope="{ item }">
          <!-- <i class="el-icon-location fl mgr10" style="margin-top: 10px"></i> -->
          <div style="overflow: hidden">
            <div class="title">{{ item.title }}</div>
            <span class="address ellipsis">{{ item.address }}</span>
          </div>
        </template>
      </el-autocomplete>
      <div class="mapLeftStyle_line"></div>
    </div>
    <div class="mapStyle">
      <div class="mapRightStyle">
        <baidu-map scroll-wheel-zoom @ready="mapReady">
          <!--地图视图-->
          <bm-view class="map"></bm-view>
          <!--搜索-->
          <bm-local-search
            :keyword="keyword"
            :panel="isShowPanel"
            auto-viewport
            :zoom="10"
            style="display: none"
            :location="location"
          ></bm-local-search>
          <!--点标注-->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
          <bm-marker-clusterer averageCenter>
            <bm-marker :position="location" />
          </bm-marker-clusterer>
        </baidu-map>
      </div>
    </div>
  </div>
</template>
            <script>
export default {
  data() {
    return {
      lon: "",
      lat: "",
      search: "",
      keyword: "",
      map: {},
      BMap: {},
      mk: "",
      isShowPanel: true,
      location: {
        lng: "",
        lat: "",
      },
      province: "",
      city: "",
    };
  },
  methods: {
    mapReady({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      var geocoder = new BMap.Geolocation(); //通过百度地图 创建地址解析器的实例   获取经纬度
      geocoder.getCurrentPosition(function (res) {
        this.currentLocation = [res.longitude, res.latitude];
        console.log("当前位置经纬度", this.currentLocation, res);
        this.province = res.address.province;
        this.city = res.address.city;
        console.log(
          "当前位置经纬度",
          this.currentLocation,
          res.address.province,
          res.address.city,
          this.province
        );
        this.location = {
          lng: this.currentLocation[0],
          lat: this.currentLocation[1],
        };
        map.centerAndZoom(
          new BMap.Point(this.currentLocation[0], this.currentLocation[1]),
          15
        );
      });
      if (this.search != "") {
        this.keyword = this.search;
      } else {
        this.map.centerAndZoom(
          new BMap.Point(this.location.lng, this.location.lat),
          15
        );
      }
    },
    querySearchAsync(str, cb) {
      var options = {
        onSearchComplete: function (res) {
          console.log(res);
          //检索完成后的回调函数
          var s = [];
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            for (var i = 0; i < res.getCurrentNumPois(); i++) {
              s.push(res.getPoi(i));
            }
            cb(s); //获取到数据时，通过回调函数cb返回到<el-autocomplete>组件中进行显示
          } else {
            cb(s);
          }
        },
      };
      var local = new BMap.LocalSearch(this.map, options); //创建LocalSearch构造函数
      local.search(str); //调用search方法，根据检索词str发起检索
      console.log(str);
    },
    handleSelect(item) {
      this.search = item.address + item.title; //记录详细地址，含建筑物名
      this.lon = item.point.lng;
      this.lat = item.point.lat; //记录当前选中地址坐标
      this.map.clearOverlays(); //清除地图上所有覆盖物
      this.mk = new BMap.Marker(item.point); //根据所选坐标重新创建Marker
      this.map.addOverlay(this.mk); //将覆盖物重新添加到地图中
      this.map.panTo(item.point); //将地图的中心点更改为选定坐标点
    },
    showPosition(position) {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      this.location = {
        lng: longitude,
        lat: latitude,
      };
    },
  },
  created() {},
  mounted() {
    //通过浏览器的Geolocation API获取经纬度
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.showPosition);
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  },
};
</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-autocomplete-suggestion {
  margin: 5px 0;
  border-radius: 4px;
  box-sizing: border-box;
  width: 98% !important;
  box-shadow: none;
  border-radius: 0px;
  background-color: none;
  border: none;
}
::v-deep .popper__arrow {
  border-width: 0px;
}
::v-deep .el-autocomplete-suggestion__wrap {
  height: 700px;
  max-height: 700px !important;
}
::v-deep .el-input__inner {
  border-width: 1px;
  margin-top: 113px;
  position: relative;
  border: none;
}
::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;
    .mapLeftStyle_line {
      height: 1px;
      border: 1px solid #999999;
      margin: 0px 21px 0px 21px;
    }
    .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;
    }
  }
  .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>