高德地图自带的，根据用户输入的地址，进行模糊搜索，用户进行选择定位，根据用户输入的半径进行范围限定
用vue以及element-ui实现的

限定区域

页面：

<div class="delivery-scope" v-show="range === '2'">
      <div id="location"></div>
      <div class="search">
        <el-input
          id="tip-input"
          size="small"
          class="search-input"
          placeholder="请输入选择地址"
          prefix-icon="el-icon-search"
          v-model="address"
          :clearable="true"
          @input="mapLocation"
        >
        </el-input>
        <ul class="list" v-show="searchMsg">
          <li v-for="(item, index) in list" :key="index" @click="selectAddress(item)">{{item.name}}</li>
        </ul>
      </div>
      <div class="radius">
        以选择的中心点为中心，半径
        <el-input
          size="small"
          class="search-input"
          placeholder="请输入区域半径"
          prefix-icon="el-icon-search"
          v-model="radius"
          :clearable="true"
        >
        </el-input>
        m
      </div>
</div>

css,没给完全，只有下拉框部分的

#location {
  width: 100%;
  height: 100%;
  margin-top: 50px;
}
.search {
  position: absolute;
  left: 10px;
  top: -40px;
  .el-input {
    width: 400px;
  }
  .list {
    width: 380px;
    // height: 300px;
    background: #ffffff;
    padding: 0 10px;
    color: #333;
    font-size: 14px;
  }
  li {
    line-height: 40px;
    cursor: pointer;
  }
}

js

data () {
    return {
      mapKey: '', // 地图密钥
      address: '', // 地址
      list: [], // 下拉框
      searchMsg: false, // 下拉框显示隐藏
      radius: '', // 半径
      selectData: {}, // 存储选中的值
      lnglat: {}, // 记录上次的经纬度
    }
 },
async mounted () {
    await MP (this.mapKey)
    this.map()
},
methods: {
  selectAddress (val) {
      this.selectData = val
      this.address = `${val.district}${val.name}`
      this.searchMsg = false
      this.map({
        center: [val.location.lng, val.location.lat]
      })
      if (JSON.stringify(this.lnglat) !== '{}') {
        this.mark('remove', this.lnglat)
      }
      this.lnglat = val.location
      this.mark('add', val.location)
    },
    map (params) {
      map = new AMap.Map('location', {
        ...params,
        resizeEnable: true,
        zoom: 14
      })
    },
    mapLocation () {
      map.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
        // 实例化Autocomplete
        var autoOptions = {
          city: '全国'
        }
        let autoComplete = new AMap.Autocomplete(autoOptions)
        autoComplete.search(this.address, (status, result) => {
          if (result && result.info === 'OK') {
            this.list = result.tips
            this.searchMsg = true
            this.placeSearch(this.list.length && this.list[0].name)
          }
        })
      })
    },
    placeSearch (value) {
      let placeSearch = new AMap.PlaceSearch({
        city: '全国',
        map: map
      })
      placeSearch.search(value)
    },
    // 自己添加一个按钮，进行设置限制范围的操作
    set () {
      if (circle) {
        circle.setMap(null)
      }
      circle = new AMap.Circle({
        center: new AMap.LngLat(this.selectData.location.lng, this.selectData.location.lat),  // 圆心位置
        radius: this.radius, // 圆半径
        borderWeight: 3,
        strokeColor: "#FF33FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeStyle: 'dashed',
        strokeDasharray: [10, 10], 
        // 线样式还支持 'dashed'
        fillColor: '#1791fc',
        zIndex: 50
      })
      circle.setMap(map)
      map.setFitView([circle])
    },
   // 添加标记
    mark (type, value) {
      if (type === 'remove') {
        return map.remove(marker)
      }
      marker = new AMap.Marker({
        position: new AMap.LngLat(value.lng, value.lat),
        title: '北京'
      })
      map.add(marker)
    },
}