jeecg 地址地图组件

289 阅读1分钟

image.png

html

 <a-col :span="12" class="input-box">
              <a-form-item-private :labelCol="labelCol" :wrapperCol="wrapperCol" label="企业地址">
                <a-input-group compact>
                  <a-input style="width: 75%" placeholder="请输入企业地址" v-decorator="['address', validatorRules.address]" v-model="address">
                    <span slot="addonAfter" size="small" style="cursor: pointer" @click="openMap('company')">打开地图</span>
                  </a-input>
                  <span v-if="companyLatlngHelp == true" style="color:red;display:block">无法获取地址定位,请点击地图定位</span>
                  <span v-if="companyLatlng.longitude != 0 && companyLatlngHelp != true" style="display:block" >{{ companyLatlng.longitude != 0 ? companyLatlng.longitude : '' }} &nbsp;&nbsp;{{ companyLatlng.latitude != 0 ? companyLatlng.latitude : '' }}</span>
                </a-input-group>
              </a-form-item-private>
            </a-col>

data

// 地图经纬度------------------------------------start
      latlng: { lat: 0, lng: 0 },表单提交的内容
      companyLatlng: {
        longitude: 0, //经度
        latitude: 0, //纬度
      },
      companyLatlngHelp:false //提示文字
      // 地图经纬度------------------------------------end

method

 //打开地图 区分企业和厂房
    openMap(type){
       console.log(type);
       this.mapType = type
       if(type == 'company'){
         this.latlng.lat = this.companyLatlng.latitude
         this.latlng.lng = this.companyLatlng.longitude
       }else{
         this.latlng.lat  = this.workShopLatlng.latitude
         this.latlng.lng = this.workShopLatlng.longitude
       }
       this.mapShow = true  
    },
    //关闭地图读取回显
 closeFullScreenMap(data, pointData) {
       if(!pointData){return this.mapShow = false}
      //console.log('data', data)
       this.lordLatlngHelp = false
      if(this.mapType == 'company'){
          if(data){
         this.form.setFieldsValue({
          address: data,
          workShopAddress: data
        })
      }
        this.companyLatlng = {
            longitude:pointData.lng, //经度
           latitude: pointData.lat, //纬度
        }
        this.companyLatlngHelp = false
      }
       if(this.mapType == 'workshop'){
         if(data){
         this.form.setFieldsValue({
          workShopAddress: data
        })
      }
          this.workShopLatlng = {
            longitude:pointData.lng, //经度
            latitude: pointData.lat, //纬度
        }
        this.workShopLatlngHelp = false
       }
      this.mapShow = false
      /*
       this.setMapLatlng(pointData)*/
    },