基于百度地图api，实现地址搜索功能

项目中有个需求，需要实现用户输入地址进行搜索，方便能够快速定位，再进行选择想要的位置。之后在地图再进行详细的选择。 实现效果如图

选择选项可以获取到的内容如下：

能取到东西还是很多的，一般我们只需要其中的经纬度即可。

下面是局部代码，假设你已经成功引入百度地图api

代码实现：

<el-form-item label="地址搜索" prop="addressValue">
   <el-autocomplete 
     style="width: 100%" v-model="addressValue" 
     :fetch-suggestions="querySearchAsync" 
     :trigger-on-focus="false" placeholder="请搜索地址" 
     clearable 
     @select="handleSelect"
   >
      <template slot-scope="{ item }">
         <div style="display: flex; align-items: center;border-bottom:1px solid #ccc">
            <i class="el-icon-search" />
            <div style="overflow: hidden">
            <div class="title">{{ item.title }}</div>
               <span class="address ellipsis">{{ item.address }}</span>
            </div>
          </div>
       </template>
   </el-autocomplete>
</el-form-item>

 // 8-1、地址搜索
    querySearchAsync(str, cb) {
      // 根据状态码
      var options = {
        onSearchComplete: function (res) {
          var s = [];
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            for (var i = 0; i < res.getCurrentNumPois(); i++) {
              s.push(res.getPoi(i));
            }
            cb(s);
          } else {
            cb(s);
          }
        },
      };
      var local = new BMap.LocalSearch(this.map, options);
      local.search(str);
    },
    
    // 8-2、选择地址
    handleSelect(item) {
      console.log(item);
      this.addressValue = item.address + item.title;
      this.form.longitude = item.point.lng;
      this.form.latitude = item.point.lat;
      // 标记移动
      this.mk = new BMap.Marker(item.point);
      this.map.addOverlay(this.mk);
      this.map.panTo(item.point);
      // 根据经纬度获取到详细地址
      var geoc = new BMap.Geocoder();
      geoc.getLocation(item.point, (rs) => {
        var addComp = rs.addressComponents;
        let networkAddress = addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber;
        console.log(networkAddress);
      });
    },