[JavaScript知识库]省市区选择、结合地图

<el-row>
    <el-col :span="24">
      <div style="display:flex">
        <el-form-item prop="merSelectedOptions" style="width: 400px">
          <span slot="label" >
            <i class="el-icon-collection-tag"></i>
              企业地址：
          </span>
          <el-cascader
            size="large"   
            :options="options"
            v-model="merInfoform.merSelectedOptions"
            @change="handleMerChange"
            placeholder="省/市/区"
            :props="merAddressSet"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="" prop="areaDetail" style="width: 400px">
          <el-input v-model="merInfoform.areaDetail" clearable placeholder="请输入详细地址"></el-input>
        </el-form-item>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="bamp_wrap">
        <el-form-item prop="areaName">
          <span slot="label" >
            <i class="el-icon-collection-tag"></i>
              企业坐标：
          </span>
          <div class="serach_input">
            <el-autocomplete
              v-model="merInfoform.areaName"
              popper-class="autoAddressClass"
              :fetch-suggestions="querySearchAsync"
              :trigger-on-focus="false"
              placeholder="请输入小区名进行定位"
              clearable
              @select="handleMerSelect"
              id="merBlur"
            >
              <template slot-scope="{ item }">
                <i class="el-icon-search fl mgr10" />
                <div style="overflow:hidden;">
                  <div class="title">{{ item.title }}</div>
                  <span class="address ellipsis">{{ item.address }}</span>
                </div>
              </template>
            </el-autocomplete>
          </div>
          <div
            style="display: block;width:600px; height: 450px; margin-top: 10px;z-index:999;"
            id="map-container"
          ></div>
        </el-form-item>
      </div>
    </el-col> 
  </el-row>

data: {
 merInfoform: {
        merSelectedOptions:[],
        areaDetail: '',
        areaName: '',
        latitude: "",
        longitude: "",
        province:"",
        city: "",
        district: "",
        districtCode: "",
        cityCode: "",
      },
      merAddressSet: {
        label:"name",
        value:"name"
      },
      merInfoRule: {
        merSelectedOptions: [
          { type: 'array', required: true, message: "请选择企业地址", trigger: 'change' }
        ],
        areaDetail: [
          { required: true, message: "请输入详细地址", trigger: 'blur' }
        ],
        areaName: [
          { required: true, message: "请输入小区名进行定位", trigger: 'blur' }
        ],
      },
	options: this.$store.state.home.addressList,
},
mounted() {
	this.initMerMap()
},
methods: {
	initMerMap() {
      var that = this
      this.map = new BMap.Map('map-container', { enableMapClick: false }) //1.新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
      this.map.enableScrollWheelZoom(); // 2.启动鼠标滚轮缩放
      if(this.merInfoform.longitude&&this.merInfoform.latitude){ //经纬度有值时地图定位到具体位置并添加标注
          var point = new BMap.Point(this.merInfoform.longitude, this.merInfoform.latitude)
          this.map.centerAndZoom(point, 19)
          this.mk = new BMap.Marker(point, { enableDragging: true })//3.创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false
          this.map.addOverlay(this.mk)//将覆盖物添加到地图中
          this.mk.addEventListener('dragend', function(e) { //监听标注拖拽
            that.getMerAddrByPoint(e.point) //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
          })
      }else{
          this.map.centerAndZoom(this.place, 19)//3.经纬度无值时地图默认定位到城市(杭州)
          this.mk = new BMap.Marker(this.place, { enableDragging: true })//创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false
          this.map.addOverlay(this.mk)//将覆盖物添加到地图中
          this.mk.addEventListener('dragend', function(e) { //监听标注拖拽
            that.getMerAddrByPoint(e.point) //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
          })
      }
      // 4.添加（右上角）平移缩放控件
      this.map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }))
      this.map.addEventListener('click', function(e) {//5.给地图绑定点击事件
        that.getMerAddrByPoint(e.point)//点击后调用逆地址解析函数
      })
    },
    
getMerAddrByPoint(point) {
      var that = this
      var geco = new BMap.Geocoder()
      geco.getLocation(point, function(res) {
        document.getElementById('merBlur').blur()//点击地图是输入框失去焦点
        that.mk.setPosition(point)//重新设置标注的地理坐标
        that.map.panTo(point)//将地图的中心点更改为给定的点
        if(res.addressComponents.province=="北京市"||res.addressComponents.province=="上海市"||res.addressComponents.province=="重庆市"||res.addressComponents.province=="天津市"){
            res.addressComponents.province=res.addressComponents.province.substring(0,2) //后台数据格式 四个直辖市省份取前两字
        } 
        that.merInfoform.province=res.addressComponents.province  //记录该点相关信息
        that.merInfoform.city=res.addressComponents.city
        that.merInfoform.district=res.addressComponents.district
        that.merInfoform.areaName = res.address
        that.merInfoform.latitude = point.lat
        that.merInfoform.longitude = point.lng
        that.merInfoform.selectedOptions = [res.addressComponents.province,res.addressComponents.city,res.addressComponents.district];
      })
    },
}

handleMerChange(e) {
      this.place=this.merInfoform.merSelectedOptions[1]
      this.map.centerAndZoom(this.place, 19)//将地图的中心点更改为选定城市
      this.merInfoform.areaName=''
      this.merInfoform.province=this.merInfoform.merSelectedOptions[0]
      this.merInfoform.city=this.merInfoform.merSelectedOptions[1]
      this.merInfoform.district=this.merInfoform.merSelectedOptions[2]
      this.options.forEach((item) => {
        if(item.name == this.merInfoform.province){
          item.children.forEach((item1) => {
            if(item1.name == this.merInfoform.city) {
              this.merInfoform.cityCode = item1.id
              item1.children.forEach(item2 => {
                if(item2.name == this.merInfoform.district){
                  this.merInfoform.districtCode = item2.id;
                }
              })
            }
          })
        }
      })
    },
    
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)//获取到数据时，通过回调函数cb返回到<el-autocomplete>组件中进行显示
          } else {
            cb(s)
          }
        }
      }
      var local = new BMap.LocalSearch(this.map, options)//创建LocalSearch构造函数
      local.search(str,{forceLocal:true})//调用search方法，根据检索词str发起检索, forceLocal:是否在指定范围搜索 默认为false
    },
    
handleMerSelect(item) {
      var that = this
      var geco = new BMap.Geocoder()
      geco.getLocation(item.point, function(res) {
          that.merInfoform.district=  res.addressComponents.district//搜索数据里面不包含区字段，需要根据经纬度定位获取
          if(item.province=="北京市"||item.province=="上海市"||item.province=="重庆市"||item.province=="天津市"){
               item.province=item.province.substring(0,2) //后台数据格式 四个直辖市省份取前两字
          } 
          that.merInfoform.areaName = item.address + item.title //记录该地址相关信息
          that.merInfoform.province=item.province
          that.merInfoform.city=item.city
          that.merInfoform.latitude = item.point.lat
          that.merInfoform.longitude = item.point.lng
          that.merInfoform.selectedOptions = [item.province,item.city,that.merInfoform.district];
          that.options.forEach((item) => {
            if(item.name == that.merInfoform.province){
              item.children.forEach((item1) => {
                if(item1.name == that.merInfoform.city) {
                  that.merInfoform.cityCode = item1.id
                  item1.children.forEach(item2 => {
                    if(item2.name == that.merInfoform.district){
                      that.merInfoform.districtCode = item2.id;
                    }
                  })
                }
              })
            }
          })
          that.map.clearOverlays() //清除地图上所有覆盖物
          that.mk = new BMap.Marker(item.point, { enableDragging: true })  //根据所选坐标重新创建Marker
          that.map.addOverlay(that.mk)//将覆盖物重新添加到地图中
          that.mk.addEventListener('dragend', function(e) { //启用拖拽(在接口无返回经纬度坐标时)
            that.getMerAddrByPoint(e.point)
          })
          that.map.panTo(item.point)//将地图的中心点更改为选定坐标点
      })
    },
    

.bamp_wrap {
  width: 60%;
  position: relative;
  .serach_input {
    margin-left: 40px;
    .el-input,
    .el-input__inner {
      width: 500px !important;
    }
    z-index: 8;
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
  }
}