vue + 百度地图 搜索

<template>
  <div class="goods-container">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        style="padding-right: 20px"
      >
        <el-form-item label="详细地址" prop="address">
          <el-autocomplete
            class="inline-input"
            v-model="ruleForm.address"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
            style="width: 100%"
          >
            <template slot="append">精确查找</template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label=" ">
          <baidu-map
            class="map"
            :center="{ lng: ruleForm.map_x, lat: ruleForm.map_y }"
            :zoom="16"
            style="height: 400px"
          >
            <bm-marker
              v-if="type == 'edit'"
              :position="{ lng: ruleForm.map_x, lat: ruleForm.map_y }"
              :dragging="true"
            >
              <bm-info-window :show="infoWindow.show" style="font-size: 13px">
                {{ ruleForm.name }}
                <br />
                <br />
                （提示：任意点击地图或通过精确搜索选择您的位置）
              </bm-info-window>
            </bm-marker>
            <bm-local-search
              :keyword="ruleForm.address"
              :auto-viewport="true"
              @searchcomplete="searchcomplete"
              style="width: 0px; height: 0px; overflow: hidden"
            />
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
          </baidu-map>
        </el-form-item>
      </el-form>
  </div>
</template>
<script>
export default {
  name: 'WorkingPlace',
  components: {},
  data() {
    return {
      ruleForm: {},
      addressKeyword: '',
      infoWindow: {
        show: true,
        contents: '(提示：任意点击地图或通过精确搜索选择您的位置)',
      },
      restaurants: [],
    }
  },
  created() {},
  methods: {
    searchcomplete(arr) {
      this.isShowPanel = true
      this.restaurants = arr.Ir
      this.restaurants.forEach((item) => {
        item.value = item.title
      })
      console.log(this.restaurants)
    },
    querySearchAsync(queryString, cb) {
      if (queryString != '') {
        // 输入内容以后才去做模糊查询
        setTimeout(() => {
          let callBackArr = [] // 准备一个空数组，此数组是最终返给输入框的数组 // 这个res是发请求，从后台获取的数据
          this.restaurants.forEach((item) => {
            callBackArr.push(item) // 就存到callBackArr里面准备返回呈现
          }) // 经过这么一波查询操作以后，如果这个数组还为空，说明没有查询到具有关联的数据，就直接返回给用户暂无数据
          if (callBackArr.length == 0) {
            cb([{ value: '暂无数据', price: '暂无数据' }])
          } // 如果经过这一波查询操作以后，找到数据了，就把装有关联数据的数组callBackArr呈现给用户
          else {
            cb(callBackArr)
          }
          var local = new BMap.LocalSearch(this.map, callBackArr) //创建LocalSearch构造函数
          local.search(queryString) //调用search方法，根据检索词str发起检索
        }, 1000)
      }
    },
    handleSelect(item) {
      console.log(item)
    },
  },
}
</script>