使用element-ui弹框实现点击地图实现定位

后台管理项目添加设备的时候，需要给设备进行定位，用vue.js和element-ui。效果图如下：

点击新增按钮的时候会弹出如上图所示的弹框然， 设备地址点击后面定位的小图标，会接着弹出一个弹框进行百度地图点击定位。如下图

点击确定的时候，上面显示的地址就会出现在请输入设备安装地址的表单里面，这个用到的是vue.js里面的数据绑定，下面是代码

	<!-- 新增设备弹框 -->
      <el-dialog title="新增设备" :visible.sync="addequipmentDialog" width="500px">
        <el-form :model="addobjequipment">
          <el-form-item label="设备IMEI" prop="deviceNumber" label-width="100px">
            <el-input
              v-model="addobjequipment.deviceNumber"
              autocomplete="off"
              placeholder="请输入设备背面15位IMEI号"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="devicename" label-width="100px">
            <el-input v-model="addobjequipment.devicename" placeholder="请输入设备名称" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item label="产品类型" prop="email" label-width="100px">
            <el-select class="mySelect" v-model="addobjequipment.line" placeholder="请选择选择产品类型">
              <el-option label="NB烟雾传感器" value="zaixian"></el-option>
              <el-option label="NB烟雾传感器" value="lixian"></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item label="设备地址" prop="address" label-width="100px" style="position:relative">
            <el-input
              id="myInput"
              v-model="addobjequipment.address"
              autocomplete="off"
              disabled
              placeholder="请输入设备安装地址"
            ></el-input>
            <a href="javascript:;" id="myGprs">
              <img src="@/assets/images/location_gray.png" @click=" getGpsList">
            </a>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelAddobj">取 消</el-button>
          <el-button type="primary" @click="addClick">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 点击新增设备定位按钮弹框 -->
      <el-dialog title="地图定位" :visible.sync="mapequipmentDialog" width="930px">
        <div class="selectAddress">
          <!-- <p>
            <img src="@/assets/images/location_green.png">
            <input class="deviceAddressInput" type="text" value v-model="addobjequipment.dizhiInput">
            <el-input type="text" class="deviceAddressInput"></el-input>
          </p>-->
          <p class="deviceAddressText">{{dizhiMap}}</p>
        </div>
        <div id="container"></div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="mapequipmentDialog = false">取 消</el-button>
          <el-button type="primary" @click="getClick">确 定</el-button>
        </span>
      </el-dialog>

data () {
    return {
      // 默认新增设备弹框控制器
      addequipmentDialog: false,
      // 新增设备的数据源
      addobjequipment: {
        deviceNumber: '',
        // 地图弹框的数据源
        devicename: '',
        address: '',
        latitude: '',
        longitude: ''
      },
      // 地图弹框
      mapequipmentDialog: false,
      // 地图弹框的数据源
      dizhiMap: ''
    }
  }

 getGpsList () {
      var that = this
      this.mapequipmentDialog = true
      this.$nextTick(function () {
        // 创建变量，用于存储地址
        var address
        var dizhi
        var marker
        if (marker === undefined) {
          //  初始化百度地图
          var map = new BMap.Map('container')
          // 创建地图实例
          var point = new BMap.Point(116.404, 39.915)
          // 创建点坐标
          map.centerAndZoom(point, 15)
          // var marker = new BMap.Marker(point);
          // map.addOverlay(marker);
          map.enableScrollWheelZoom(true)

          map.addEventListener('click', function (e) {
            // console.log(e);

            // 移除标注
            map.removeOverlay(marker)

            // 创建变量，用于存储经纬度
            var point = e.point
            // console.log(point)

            // 设置lng的值
            window.localStorage.setItem('lng', point.lng)

            // 设置lat的值
            window.localStorage.setItem('lat', point.lat)

            // 创建标注实例
            marker = new BMap.Marker(point)

            // 添加标注
            map.addOverlay(marker)

            // 创建地理编码实例
            var geoc = new BMap.Geocoder()

            geoc.getLocation(point, function (rs) {
              // console.log(rs)

              dizhi = rs.address

              address = rs.addressComponents
              // console.log(address)

              // 设置currentProvince的值
              window.localStorage.setItem('currentProvince', address.province)

              // 设置currentCity的值
              window.localStorage.setItem('currentCity', address.city)
              // 设置地址的值
              window.localStorage.setItem('dizhi', dizhi)
              that.dizhiMap = window.localStorage.getItem('dizhi')
            })
          })
        }
      })
    },
    getClick () {
      this.mapequipmentDialog = false
      // console.log(that.addobjequipment.dizhiInput)
      this.addobjequipment.address = window.localStorage.getItem('dizhi')
      this.addobjequipment.latitude = window.localStorage.getItem('lat')
      this.addobjequipment.longitude = window.localStorage.getItem('lng')
      this.editobjequipment.address = window.localStorage.getItem('dizhi')
      this.editobjequipment.latitude = window.localStorage.getItem('lat')
      this.editobjequipment.longitude = window.localStorage.getItem('lng')
    },
        async addClick () {
      // this.addobjequipment = {}
      if (this.addobjequipment.deviceNumber === '') {
        this.$message.error('请输入设备号')
        return
      }
      if (this.addobjequipment.devicename === '') {
        this.$message.error('请输入设备名')
        return
      }
      if (this.addobjequipment.address === '') {
        this.$message.error('请选择地址')
        return
      }
      this.addequipmentDialog = false
      var res = await this.$http.post(url, {
        deviceNumber: this.addobjequipment.deviceNumber,
        devicename: this.addobjequipment.devicename,
        address: this.addobjequipment.address,
        latitude: this.addobjequipment.latitude,
        longitude: this.addobjequipment.longitude
      })
      console.log(res)
      var data = res.data
      if (res.status === 200) {
        if (data.success === true) {
          this.$message({
            message: data.results,
            type: 'success'
          })
          this.getStreetList()
          this.cancelAddobj()
        } else {
          this.$message.error(data.msg)
        }
      } else {
        this.$message.error(data.results)
      }
    },

这样就可以了。