火灾事件添加根据所选区域，地图自动定位中心

guoshilong

2023-03-09 668642a485a9f4b083ffc6981643ee2247500c2d

 src/views/fire/fireAdd.vue

@@ -1,12 +1,14 @@
<template>
  <basic-container>
    <el-row>
      <el-col :span="12">
      <el-col :span="11">
        <avue-form ref="form" v-model="form" :option="option" @submit="submit"></avue-form>
      </el-col>
      <el-col :span="1">

      </el-col>
      <el-col :span="12">
        <OpenLayersMap ref="olMap" @getMapData="getMapData" :map-location="mapLocation"></OpenLayersMap>
<!--        <avue-input-map v-model="form"></avue-input-map>-->
      </el-col>
    </el-row>
  </basic-container>
@@ -16,6 +18,7 @@
import {add} from "@/api/fire/fire";
import OpenLayersMap from "@/components/OpenLayersMap/index";
import axios from "@/router/axios"
import {getDetail} from "@/api/base/region";
export default {
  name: "fireAdd",
  components: {OpenLayersMap},
@@ -76,7 +79,7 @@
              } else {
                callback()
              }
            }
            },
          },
          {
            label:'具体地址',
@@ -158,7 +161,9 @@
    "form.location":{
      handler(newVal){
        if (newVal){
          this.$refs.olMap.getLocation(newVal)
          if (newVal.length == 3){
            this.getRegionDetail(newVal)
          }
        }
      }
    }
@@ -188,8 +193,16 @@
    },
    //获取地图经纬度
    getMapData(data){
      this.form.lon = data[0][0]
      this.form.lat = data[0][1]
      this.form.lon = data[0]
      this.form.lat = data[1]
    },
    getRegionDetail(regionCode){
      let code = regionCode[2]
      getDetail(code).then(res=>{
        let data = res.data.data
        let regionName = [data.provinceName,data.cityName,data.districtName]
        this.$refs.olMap.getLocation(regionCode,regionName)
      })
    }
  }
}