百度地图 baidu-map 地图根据范围画圈

需求：
1.输入地址联想相关地址
2.点击地图获取位置经纬度和地点名
3.根据中心点设置标注
4.输入地址后，在输入框输入范围（多少米），根据范围在地图上画圈

html:

<div class="first-section">
        <div class='address'>
          <el-form-item label="移动端打卡中心位置" prop="name">
            <!-- <div class="app-container"> -->
            <el-autocomplete v-model="addressForm.name" :fetch-suggestions="querySearch" clearable
                             placeholder="请输入详细地址" style="width: 100%" :trigger-on-focus="false"
                             @select="handleSelect"  @clear='toClear'/>
            <!-- </div> -->
          </el-form-item>
        </div>
        <div>
          <baidu-map ref="bCircleMap" style="width:900px;height:350px" :scroll-wheel-zoom="true" :center="mapCenter" :inertial-dragging="false"
                     :zoom="mapZoom" @ready="handler" ak="btN86TKzCHfZyiE3t4bq5kHSPw1j9TRh" @click="getClickInfo">
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true">
            </bm-geolocation>
            <bm-marker :position="{lng: mapCenter.lng, lat: mapCenter.lat}" @click="getClickInfo"></bm-marker>
            <!-- 比例尺控件，注册此组件才会在地图上显示比例尺 -->
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <!-- 缩放控件，注册此组件才会显示拖放进度 -->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-circle :center="mapCenter" :radius="addressForm.range" :stroke-opacity="0.5" fill-color="#39B1FC" :fill-opacity="0.3"
                       :stroke-weight="2" stroke-color="#0000ff" @lineupdate="updateCirclePath" :editing="false" v-if='addressForm.range'></bm-circle>
          </baidu-map>
        </div>
        <div style='margin-top:22px;'>
          <el-form-item label="允许打卡范围:" prop='range'>
            <el-input placeholder="请输入数字" clearable v-model="addressForm.range" type='number' @input="handleInput1"></el-input>
            <span style='display: block;margin-left: 10px;width: 100px;'>米以内</span>
          </el-form-item>
        </div>
      </div>

js:

updateCirclePath(e) {
      let _self = this;
      let map = this.map;
      let BMap = this.BMap;
      let radius = e.target.getRadius();//获取圆半径（单位米，可利用BMapLib.DistanceTool工具自定义单位）

      let center = e.target.getCenter();//获取圆心坐标
      let bounds = e.target.getBounds().getNorthEast();//获取圆可视范围东北角坐标

      // 覆盖物的属性发生变化时触发
      this.addressForm.range = e.target.getRadius();
      this.mapCenter = e.target.getCenter()


      if(_self.overlayLabel != null){
        map.removeOverlay(_self.overlayLabel);
      }

      //生成Label覆盖层
      var point = new BMap.Point(bounds.lng, center.lat);

      _self.overlayLabel = new BMap.Label("半径:"+ radius + "m",{offset:new BMap.Size(20,-10),position: point || e.target.rc[1].point});
      //添加覆盖层
      map.addOverlay(_self.overlayLabel);
    },
    handler({
              BMap,
              map
            }) {
      this.BMap = BMap
      this.map = map
      this.geoc = new BMap.Geocoder() // 地址解析对象

      map.setDefaultCursor("crosshair");
      if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {

        this.mapCenter.lng = this.mapLocation.coordinate.lng
        this.mapCenter.lat = this.mapLocation.coordinate.lat
        this.mapZoom = 14
        // map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate))
      } else {
        this.mapCenter.lng = 116.404
        this.mapCenter.lat = 39.915
        this.mapZoom =14
      }

    }, makerCenter(point) {
      if (this.map) {
        this.map.clearOverlays()
        // this.map.addOverlay(new this.BMap.Marker(point))
        this.mapCenter.lng = point.lng
        this.mapCenter.lat = point.lat
        this.mapZoom = 15
      }
    },

    // 点击地图
    getClickInfo(e) {
      // 此时已经可以获取到BMap类
      if (this.BMap) {
        this.mapCenter.lng = e.point.lng
        this.mapCenter.lat = e.point.lat
        const that = this
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder()
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(e.point, function(res) {
          const addrComponent = res.addressComponents
          const surroundingPois = res.surroundingPois
          const province = addrComponent.province
          const city = addrComponent.city
          const district = addrComponent.district
          let addr = addrComponent.street
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`
            } else {
              addr += `${surroundingPois[0].title}`
            }
          } else {
            addr += addrComponent.streetNumber
          }
          that.choosedLocation = {
            province,
            city,
            district,
            addr,
            ...that.center
          }
          if (province === city) {
            that.pointAddress = province + district + addr
          } else {
            that.pointAddress = province + city + district + addr
          }
          that.addressForm.name = that.pointAddress

        })
      }
    },
    // 搜索框搜索地点
    querySearch(queryString, cb) {

      var that = this
      var myGeo = new this.BMap.Geocoder()

      myGeo.getPoint(queryString, function(point) {
        if (point) {
          that.mapLocation.coordinate = point
          that.makerCenter(point)
          that.mapCenter.lng = point.lng
          that.mapCenter.lat = point.lat
        } else {
          that.mapLocation.coordinate = null
        }

      }, this.locationCity)
      var options = {
        onSearchComplete: function(results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = []
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i)

              var xvalue;
              if (x.address === x.title) {
                xvalue = x.address
              } else {
                xvalue = x.address + x.title
              }
              var xitem = {
                value: xvalue,
                point: x.point
              }

              s.push(xitem)

              cb(s)
            }
          } else {
            cb()
          }
        }
      }
      var local = new this.BMap.LocalSearch(this.map, options)
      local.search(queryString)
    },