- 想通过选点以后反带入到省市县，以前的逻辑是可以通过地图选点带入
- 以下内容为我修改后的，需要注意的我会提示出来，
-
<el-dialog :visible.sync="mapShow" width="60%" center append-to-body v-if="mapShow"> //加这个的目的是为了每次进入地图页面都进行初始化，不加的话会导致只加载一次，再次进入路径不变的问题
<mapUtils v-on:addressInfoListen="addressInfoListen" v-bind:addresss="address"></mapUtils>
</el-dialog>
- 其中精华部分在 snameSearch中
-
snameSearch() {
let me=this;//这样定义上面的省市县才可以拿到值
if (AMap.event && me.snameAuto) {
me.snameAutoListener = AMap.event.addListener(me.snameAuto, "select", (e) => {
if (e.poi.location && e.poi.location.getLat()) {
console.log(e)
console.log(me.address)
me.orderForm.slat = e.poi.location.lat;
me.orderForm.slon = e.poi.location.lng;
me.orderForm.sname = e.poi.name;
me.address=e.poi.district+e.poi.name;//目的是为了点击地图的时候能讲坐标点带入
//实例化Geocoder 目的是解析当前的省市县信息
var geocoder = new AMap.Geocoder({
city: ""
});
var lnglatXY=[e.poi.location.lng, e.poi.location.lat];//地图上所标点的坐标
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
//获得了有效的地址信息:
//即，result.regeocode.formattedAddress
me.cityName=result.regeocode.addressComponent.city
me.provinceName=result.regeocode.addressComponent.province
me.countyName=result.regeocode.addressComponent.district
/* alert(city)
alert(province) */
}else{
var city = '获取失败';
}
});
} else {
console.log("2")
me.geocoder(e.poi.name, "sname");
}
});
}
},
-
以下代码为写的完整的，有需要的可以看一下
-
regist.vue
-
<template> <div class="app-container"> <el-form :disabled="fromDisabled" class="wrapper" ref="orderForm" :model="orderForm" :rules="addRules" label-width="100px"> <el-row> <el-col :span="2"> <h3>{{ policy_title }}</h3> </el-col> <el-col :span="22"> <hr class="horizontalLine" /> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="2" style="margin-top:8px;margin-left:4px"> <div> <b>{{policy_no_lable}}</b> </div> </el-col> <el-col :span="8"> <div style="width:400px"> <el-input :disabled="true" placeholder="请输入保单号" v-model="policy_no" class="aaaaa"></el-input> </div> </el-col> <el-col :span="2" style="text-align:center;margin-top:8px"> <strong> <div>{{ item_no_lable }}</div> </strong> </el-col> <el-col :span="8"> <div style="width:400px"> <el-input :disabled="true" placeholder="请输入设备编码" v-model="item_no"></el-input> </div> </el-col> </el-row> <br /> <el-row> <el-col :span="2" style="margin-top:8px;margin-left:4px"> <b> <div>{{ car_no_lable }}</div> </b> </el-col> <el-col :span="8"> <div style="width:400px"> <el-input :disabled="true" placeholder="请输入车牌号" v-model="car_no"></el-input> </div> </el-col> </el-row> <br /> <el-row> <el-col :span="2"> <h3>{{ regist_title }}</h3> </el-col> <el-col :span="22"> <hr class="horizontalLine" /> </el-col> </el-row> <div> <el-row> <el-col :span="2" style="margin-top:8px;margin-left:4px"> <b> <div>{{ danger_time_lable }}</div> </b> </el-col> <el-col :span="9"> <el-date-picker :disabled="operation_disable" v-model="value_date" align="right" type="date" placeholder="选择日期" ></el-date-picker> <el-time-picker :disabled="operation_disable" :value="value_time" v-model="value_time" format="hh:mm" ></el-time-picker> </el-col> <el-col :span="2" style="margin-top:8px;margin-left:4px"> <b> <div>{{ regist_time_lable }}</div> </b> </el-col> <el-col :span="9"> <el-date-picker :disabled="operation_disable" v-model="regist_date" align="right" type="date" placeholder="选择日期" disabled ></el-date-picker> <el-time-picker :disabled="operation_disable" v-model="regist_time" placeholder="选择时间点" format="HH:mm" disabled ></el-time-picker> </el-col> </el-row> <br /> <el-row> <el-col style="margin-top:8px;margin-left:4px" :span="2"> <label>{{ danger_address_lable }}</label> </el-col> <el-col :span="18"> <div> <el-input :disabled="true" placeholder="请选择省份" v-model="provinceName" style="width:220px" ></el-input> <el-input :disabled="true" v-model="provinceCode" v-if="1 != 1" style="width:220px"></el-input> <el-input :disabled="true" placeholder="请选择市区" v-model="cityName" style="width:220px"></el-input> <el-input :disabled="true" v-model="cityCode" v-if="1 != 1" style="width:220px"></el-input> <el-input :disabled="true" placeholder="请选择区/县" v-model="countyName" style="width:220px"></el-input> <el-input :disabled="true" v-model="countyCode" v-if="1 != 1" style="width:220px"></el-input> </div> <div> <el-dialog :visible.sync="mapShow" width="60%" center append-to-body v-if="mapShow"> <mapUtils v-on:addressInfoListen="addressInfoListen" v-bind:addresss="address"></mapUtils> </el-dialog> </div> <br /> <el-input :disabled="operation_disable" id="sname" v-model="address" type="text" style="width:670px" @focus="initAuto('sname')" @input="snameSearch" @keyup.delete.native="deletePlace('sname')" placeholder="请输入出险详细地点"> </el-input> <el-button :disabled="operation_disable" type="primary" @click="mapSelect">地图选点</el-button> </el-col> </el-row> <br /> <el-row> <el-col style="margin-top:8px;margin-left:4px" :span="2"> <label>{{ regist_man_lable }}</label> </el-col> <el-col :span="4"> <el-input :disabled="operation_disable" v-model="regist_name" :placeholder="main_message_name" ></el-input> </el-col> <el-col :span="1"> </el-col> <el-col :span="5"> <el-input :disabled="operation_disable" v-model="regist_phone" :placeholder="main_message_phone" ></el-input> </el-col> </el-row> </div> <br /> <el-row> <el-col :span="2"> <h3>出险信息</h3> </el-col> <el-col :span="22"> <hr class="horizontalLine" /> </el-col> </el-row> <div> <el-row> <el-col style="margin-top:5px;margin-left:4px" :span="2"> <b> <div>{{ danger_character_lable }}</div> </b> </el-col> <el-col :span="10" style="margin-top:5px"> <el-radio-group v-model="damage_type"> <div @click="changeDangerCharacter()"> <el-radio v-loading="listLoading" v-for="type in damage_types" :key="type.damageTypeCode" :label="type.damageTypeCode" :disabled="false" >{{ type.damageTypesName }}</el-radio> </div> </el-radio-group> </el-col> </el-row> <br /> <el-row> <el-col style="margin-top:5px;margin-left:4px" :span="2"> <b> <div>{{ danger_reason_lable }}</div> </b> </el-col> <el-col :span="20"> <el-radio-group v-model="damage_cause"> <div @change="changeDangerReason('A')" > <el-radio v-loading="listLoading" :disabled="operation_disable" v-for="cause in damage_cause_ones" :key="cause.damageCauseCode" :label="cause.damageCauseCode" :name=" cause.damageCauseName" >{{ cause.damageCauseName }} </el-radio> </div> <!-- <div @click="changeDangerReason('B')" class="frameStyle"> <el-radio v-loading="listLoading" :disabled="operation_disable" v-for="cause in damage_cause_twos" :key="cause.damageCauseCode" :label="cause.damageCauseCode"> {{ cause.damageCauseName }}</el-radio> </div>--> </el-radio-group> </el-col> </el-row> <br /> <el-row> <el-col style="margin-top:0px;margin-left:4px" :span="2"> <label>{{ danger_environment_lable }}</label> </el-col> <el-col :span="18"> <el-radio-group v-model="damage_areaenvironment"> <el-radio v-loading="listLoading" :disabled="operation_disable" v-for="areaenvironment in damage_areaenvironments" :key="areaenvironment.areaEnvironmentCode" :label="areaenvironment.areaEnvironmentCode" >{{ areaenvironment.areaEnvironmentName }}</el-radio> </el-radio-group> </el-col> </el-row> <br /> <el-row> <el-col :span="2"> <h3>损失信息</h3> </el-col> <el-col :span="22"> <hr class="horizontalLine" /> </el-col> </el-row> <el-row> <el-col style="margin-top:8px;margin-left:4px" :span="2"> <label>{{ is_danger_lable }}</label> </el-col> <el-col :span="12"> <el-select v-loading="listLoading" :disabled="operation_disable" @click.native="getCatastrophe()" v-model="damage_catastrophe" placeholder="请选择" > <el-option v-for="catastrophe in damage_catastrophes" :key="catastrophe.catastropheName" :label="catastrophe.catastropheName" :value="catastrophe.catastropheCode" ></el-option> </el-select> </el-col> </el-row> <br /> <el-row> <el-col style="margin-top:0px;margin-left:4px" :span="2"> <label>{{ loss_lable }}</label> </el-col> <el-col :span="18"> <el-checkbox-group :disabled="operation_disable" v-model="checkedLoss" @change="handleCheckedLossChange" > <el-checkbox v-loading="listLoading" icon="icon-driver" v-for="loss in losss" :key="loss.lossName" :label="loss.lossCode" >{{ loss.lossName}}</el-checkbox> </el-checkbox-group> </el-col> </el-row> <br /> <el-row> <el-col style="margin-top:5px;margin-left:4px" :span="2"> <label>{{ danger_process }}</label> </el-col> <el-col :span="18"> <el-input :disabled="operation_disable" type="textarea" id="textarea1" v-model="damage_text" placeholder="请点击生成出险摘要按钮,查看生成出险摘要" :rows="3" :max-rows="6" ></el-input> <el-button v-if="explicitImplicit=='true'" :disabled="operation_disable" @click="open()" type="primary" size="small" variant="primary" >生成出险摘要</el-button> </el-col> </el-row> </div> <el-row> <el-col :span="2"> <h3>案件管理</h3> </el-col> <el-col :span="22"> <hr class="horizontalLine" /> </el-col> </el-row> <div> <el-row> <el-col style="margin-top:8px;margin-left:4px" :span="2"> <label>负责人 :</label> </el-col> <el-col :span="4"> <el-select :disabled="operation_disable" v-model="response_name" placeholder="请选择" filterable style="width:240px" @click.native="getPersonInCharge()" @change="nameToPhone" > <el-option v-for="item in response_names" :key="item.personInChargeCode" :label="item.personInChargeName" :value="item.personInChargeCode" ></el-option> </el-select> </el-col> <el-col :span="1"> </el-col> <el-col :span="5"> <el-input disabled v-model="response_phone" :placeholder="main_message_phone" ></el-input> </el-col> </el-row> </div> <div style="float:right;margin-bottom:60px"> <el-row> <el-col> <el-button v-if="explicitImplicit=='true'" v-show="operation_show" type="primary" size="big" icon="el-icon-right" @click="createClaim" >创建赔案</el-button> </el-col> </el-row> </div> </el-form> </div> </template> <script> import {formatDate} from './../../utils/date.js' import mapUtils from './mapUtils.vue' import axios from 'axios' import {getDamageType,getDamageCauseAccident,getDamageCauseDisaster,getAreaEnvironment,getCatastrophe,getLosss,getPersonInCharge} from '@/api/damageinfo' import {registsubmit} from '@/api/regist-submit' import {createRegist} from '@/api/regist-created' import {getPolicyInfo} from '@/api/policy-info' var mapObj = new AMap.Map("mapContainer", { resizeEnable: true, view: new AMap.View2D({ resizeEnable: true, zoom:13//地图显示的缩放级别 }), keyboardEnable:false }); export default { name: 'amap-page', components: { mapUtils }, data() { let validatePlace = (rules, value, callback) => { if (rules.field === 'sname') { if (value === '') { callback(new Error('请输入出险地点')); } else { if (!this.orderForm.slat || this.orderForm.slat === 0) { callback(new Error('请搜索并选择详细出险地点')); } else { callback(); } } } }; var clickEventListener=AMap.event.addListener(mapObj,'click',function(e){ document.getElementById("lngX").value=e.lnglat.getLng(); document.getElementById("latY").value=e.lnglat.getLat(); AMap.service('AMap.Geocoder',function(){//回调函数 //实例化Geocoder var geocoder = new AMap.Geocoder({ city: "" }); var lnglatXY=[e.lnglat.getLng(), e.lnglat.getLat()];//地图上所标点的坐标 geocoder.getAddress(lnglatXY, function(status, result) { alert(status) if (status === 'complete' && result.info === 'OK') { //获得了有效的地址信息: //即，result.regeocode.formattedAddress //console.log(result); var city = result.regeocode.addressComponent.city; /* alert(city) alert(province) */ }else{ var city = '获取失败'; //alert(city) //获取地址失败 } document.getElementById("city").value=city; console.log(city); }); }) }); return { orderForm: { sname: '', // 上车地点 slat: 0, // 上车地点纬度 slon: 0, // 上车地点经度 }, addRules: { sname: [{required: true, validator: validatePlace, trigger: 'change'}], dname: [{required: true, validator: validatePlace, trigger: 'change'}] }, mapObj:"", snameAuto: null, // 上车地点Autocomplete dnameAuto: null, // 下车地点Autocomplete snameAutoListener: null,// 上车地点Autocomplete监听器 dnameAutoListener: null,// 下车地点Autocomplete监听器 infoVisible: false, // 选中地址信息显示, fromDisabled:false, explicitImplicit:"", amap_key:"d58bbfec876d0776098a5a8b25735329", operateion_type:"", regist_no:"", damage_text:"", damage_areaenvironments:[], damage_areaenvironment:"", damage_catastrophes:[], damage_catastrophe:"", damage_cause_ones:[], damage_cause_twos:[], damage_cause:"", response_inner_phone:"", damage_types:[], damage_type:"", losss:[], listLoading:true, operation_disable:true, operation_show:"true", sname: '', slat: 0, slon: 0, addRules: { sname: [{ required: true, validator: validatePlace, trigger: 'change' }], }, snameAuto: null, snameAutoListener: null, infoVisible: false, mapShow: false, mapJson: '', province: '', city: '', block: '', abDistance: '', latitude: '39.909178', longitude: '116.397454', longitude2: '116.397454', latitude2: '39.909178', provinces: [], countys:[], citys:[], county:"", checkedLoss: [], catastrophe_values: [], catastrophes: [], item_no: '', car_no: '', item_no_lable: '设备编码 :', car_no_lable: '车牌号 : ', policy_title: '保单信息', danger_process: '出险摘要: ', policy_no_lable: '保单号 ：', policy_no: '', regist_title: '报案信息', danger_time_lable: '出险时间 :', regist_time_lable: '报案时间 :', danger_environment_lable: '周边环境 : ', danger_character_lable: '出险性质 :', danger_reason_lable: '出险原因 :', is_danger_lable: '巨灾信息 :', loss_lable: '损失情况 :', regist_name: '', regist_phone: "", response_phone: '', response_name: "", response_names: [], danger_address_lable: '出险地点:', regist_man_lable: '报案人:', regist_name1: '蒙加福', single: '保单详情', reason2: '', reason1: '', character11: [], address: '', danger_environment: [], danger_character: [], danger_reason1: [], danger_reason2: [], danger: '01', environment: '', character: '03', character2: '', reason: '44', driver_lable: '驾驶员:', value_time: new Date() - 30 * 60 * 1000, // value_time: '', value_date: new Date(), regist_time: new Date(), regist_date: new Date(), regist_man: '被保险人', ecc_lable: '从ecc获取', cities: [], districts: [], main_message_name: '请输入姓名', main_message_phone: '请输入联系方式', text: '', provinceCode:'', provinceName:'', cityCode:'', cityName:'', countyCode:'', countyName:'' } }, provide(){ return { address:this.address } }, methods: { addressInfoListen(data){ console.log("-----------------------"); console.log(data); this.mapShow = false this.address = data.address this.provinceCode = data.provinceCode this.provinceName = data.provinceName if(data.cityCode=="" || data.cityName==""){ this.cityCode = data.provinceCode this.cityName = data.provinceName }else{ this.cityCode = data.cityCode this.cityName = data.cityName } this.countyCode = data.districtCode this.countyName = data.districtName }, getparams(){ //获取保单号和类型 if(this.$route.params.policyNo != null || this.$route.params.policyNo != ""){ this.policy_no = this.$route.params.policyNo this.operateion_type = this.$route.params.operationType this.item_no = this.$route.params.equipmentNo } }, getPolicyInfo(){ //加载保单信息 this.listLoading = true getPolicyInfo().then(response => { if(response.data.returnCode==0){ this.policy_no = this.$route.params.policyNo this.car_no = response.data.businessInformation.insureSort this.item_no = response.data.businessInformation.equipmentNo this.listLoading = false } }) }, getDamageType(){ //加载出险性质 this.listLoading = true getDamageType("DamageType").then(response => { if(response.code==0){ this.damage_types = response.businessInformation.damageTypes console.log(this.damage_types) this.listLoading = false } }) }, getDamageCauseOne(){ //加载出险原因 this.listLoading = true getDamageCauseAccident("operationType","DamageCode").then(response => { if(response.code==0){ this.damage_cause_ones = response.businessInformation.damageCause console.log(this.damage_cause_ones+"00000000000000000000000000000000") this.listLoading = false } }) }, getDamageCauseTwo(){ //加载出险原因 this.listLoading = true getDamageCauseDisaster().then(response => { if(response.returnCode==0){ this.damage_cause_twos = response.businessInformation.damageCause this.listLoading = false } }) }, getAreaEnvironment(){ //加载周边环境 this.listLoading = true getAreaEnvironment("AreaEnvironment").then(response => { if(response.code==0){ this.damage_areaenvironments = response.businessInformation.areaEnvironment this.listLoading = false } }) }, getLosss(){ //加载损失类型 this.listLoading = true getLosss("operationType","lossType").then(response => { if(response.code==0){ this.losss = response.businessInformation.losss console.log(this.losss) this.listLoading = false } }) }, getCatastrophe(){ //加载巨灾信息 // this.listLoading = true getCatastrophe("catastrophe").then(response => { if(response.code==0){ this.damage_catastrophes = response.businessInformation.catastrophe this.listLoading = false } }) }, getPersonInCharge(){ //加载负责人列表 // this.listLoading = true let params = { operationType: "operationType", losss: this.losss }; getPersonInCharge(params).then(response => { if(response.code==0){ this.response_names = response.businessInformation.personInCharge this.listLoading = false } }) }, registCreated(){ getPersonInCharge().then(response => { if(response.data.returnCode==0){ this.response_names = response.data.businessInformation.personInCharge this.listLoading = false } }) }, createClaim() { // let personInChargeNames = "", personInChargeCode = "",_self = this; // let personInChargeNames = "",; // let personInChargeCode = ""; let _self=this; console.log(this.response_names) this.response_names.find(function(val,key){ if(_self.response_name == val.personInChargeCode){ _self.personInChargeNames = val.personInChargeName; _self.personInChargeCodes = val.personInChargeCode; return; } }) console.log(_self.personInChargeNames+"-------") if(this.regist_phone==""||this.regist_phone==null){ this.$message.error("请录入手机号") } else if(this.regist_name==""||this.regist_name==null){ this.$message.error("请录入报案人") } else if(this.address==""||this.address==null){ this.$message.error("请录入出险地点") } else if(this.damage_areaenvironment==""||this.damage_areaenvironment==null){ this.$message.error("请录入周边环境") } else if(this.regist_date==""||this.regist_date==null){ this.$message.error("请录入报案时间") } else if(this.value_date==""||this.value_date==null){ this.$message.error("请录入出险日期") } else if(this.damage_cause==""||this.damage_cause==null){ this.$message.error("请录入出险原因") } else if(this.damage_type==""||this.damage_type==null){ this.$message.error("请录入出险性质") } else if(this.damage_text==""||this.damage_text==null){ this.$message.error("请录入出险摘要") } else if(this.checkedLoss==""||this.checkedLoss==null){ this.$message.error("请录入损失情况") }else{ let data ={ policyNo: this.policy_no, registInfo: { registDate:this.regist_date, reportorName:this.regist_name, reportorPhone:this.regist_phone, }, damageInfo:{ damageDate:this.value_date, damageAddress:this.address, provinceCode:this.provinceCode, provinceName:this.provinceName, cityName:this.cityName, cityCode:this.cityCode, countyCode:this.countyCode, countyName:this.countyName, areaEnvironmentCode:this.damage_areaenvironment, damageCauseCode:this.damage_cause, damageTypesCode:this.damage_type, catastropheCode:this.damage_catastrophe, lossType:this.checkedLoss, damageText:this.damage_text, personInChargeCode:this.response_name, personInChargeName:this.personInChargeNames, phone:this.response_phone, } } this.sumbitRegist(data) } }, sumbitRegist(data){ registsubmit(data).then(response => { console.log(this.data) if(response.code==0){ this.$router.push({ path: '/waitLook/lookIndex', query: { claimNo : response.businessInformation.claimNo } //this.$router.push('/waitLook/lookIndex') }) } }) }, createRegist(){ if(this.$root.nowClaimNo != null && this.$root.nowClaimNo != ""){ //加载报案信息 createRegist(this.$root.nowClaimNo).then(response => { if(response.code==0){ let registInfo = response.businessInformation.registInfo this.regist_no = registInfo.registNo // let damage_year = registInfo.damageDate.split(' ')[0].split('-')[0] // let damage_month = registInfo.damageDate.split(' ')[0].split('-')[1] // let damage_day = registInfo.damageDate.split(' ')[0].split('-')[2] // let damage_hour = registInfo.damageDate.split(' ')[1].split(':')[0] // let damage_mi = registInfo.damageDate.split(' ')[1].split(':')[1] // this.value_date = new Date(damage_year, damage_month, damage_day, damage_hour, damage_mi) // this.value_time = new Date(damage_year, damage_month, damage_day, damage_hour, damage_mi) // let regist_year = registInfo.registDate.split(' ')[0].split('-')[0] // let regist_month = registInfo.registDate.split(' ')[0].split('-')[1] // let regist_day = registInfo.registDate.split(' ')[0].split('-')[2] // let regist_hour = registInfo.registDate.split(' ')[1].split(':')[0] // let regist_mi = registInfo.registDate.split(' ')[1].split(':')[1] // this.regist_date = new Date(regist_year, regist_month, regist_day, regist_hour, regist_mi) // this.regist_time = new Date(regist_year, regist_month, regist_day, regist_hour, regist_mi) this.provinceCode = registInfo.damageProvCode this.provinceName = registInfo.damageProvName this.cityCode = registInfo.damageCityCode this.cityName = registInfo.damageCityName this.countyCode = registInfo.damageDistCode this.countyName = registInfo.damageDistName this.address = registInfo.damageAddress this.regist_name = registInfo.reportorName this.regist_phone = registInfo.reportorPhone this.damage_type = registInfo.damageType this.damage_cause = registInfo.damageCode this.damage_catastrophe = registInfo.catastropheCode this.damage_areaenvironment = registInfo.areaEnvironment // this.checkedLoss = registInfo.lossItemType // alert(registInfo.lossItemType) let lossItemType = registInfo.lossItemType.split(',') for(let i = 0; i< lossItemType.length; i++){ this.checkedLoss.push(lossItemType[i]) } this.damage_text = registInfo.damageText this.response_name = registInfo.leaderCode this.response_phone=registInfo.leaderPhone // this.response_phone = registInfo.personInChargePhone this.policy_no = registInfo.policyNo // return false }else{ // return true } }) }else{ this.address = "" } }, toInitAuto(inputId) { var auto = null; AMap.plugin('AMap.Autocomplete', function () { let autoOptions = { city: "", input: inputId }; auto = new AMap.Autocomplete(autoOptions); }); return auto; }, initAuto(inputId) { if (inputId === "sname" && this.snameAuto == null) { this.snameAuto = this.toInitAuto(inputId); } }, snameSearch() { let me=this; if (AMap.event && me.snameAuto) { me.snameAutoListener = AMap.event.addListener(me.snameAuto, "select", (e) => { if (e.poi.location && e.poi.location.getLat()) { console.log(e) console.log(me.address) me.orderForm.slat = e.poi.location.lat; me.orderForm.slon = e.poi.location.lng; me.orderForm.sname = e.poi.name; me.address=e.poi.district+e.poi.name; //实例化Geocoder var geocoder = new AMap.Geocoder({ city: "" }); var lnglatXY=[e.poi.location.lng, e.poi.location.lat];//地图上所标点的坐标 geocoder.getAddress(lnglatXY, function(status, result) { if (status === 'complete' && result.info === 'OK') { //获得了有效的地址信息: //即，result.regeocode.formattedAddress me.cityName=result.regeocode.addressComponent.city me.provinceName=result.regeocode.addressComponent.province me.countyName=result.regeocode.addressComponent.district /* alert(city) alert(province) */ }else{ var city = '获取失败'; //alert(city) //获取地址失败 } }); } else { console.log("2") me.geocoder(e.poi.name, "sname"); } }); } }, geocoder(keyword, inputValue) { let geocoder = new AMap.Geocoder({ //city: "010", radius: 1000 }); geocoder.getLocation(keyword, (status, result) => { if (status === 'complete' && result.info === 'OK') { let geocode = result.geocodes; if(geocode.length > 0){ if(inputValue === "sname") { this.orderForm.slat = geocode[0].location.getLat(); this.orderForm.slon = geocode[0].location.getLng(); this.orderForm.sname = keyword; // this.$refs.orderForm.validateField("sname"); } } } }); }, deletePlace(inputId) { if (inputId === "sname") { this.slat = 0; this.slon = 0; } }, mapSelect() { this.mapShow = true; }, nameToPhone(event) { let inner_phone = ""; this.response_names.find(function(val,key){ if(event == val.personInChargeCode){ inner_phone = val.personinnerCode; return ; } }) this.response_phone = inner_phone }, initText() { let radioName = "",_self = this; this.damage_cause_ones.find(function(val,key){ if(_self.damage_cause == val.damageCauseCode){ radioName = val.damageCauseName; return; } }) let personInChargeNames = ""; this.response_names.find(function(val,key){ if(_self.response_name == val.personInChargeCode){ personInChargeNames = val.personInChargeName; return; } }) let damage_causename = ""; this.damage_cause_ones.find(function(val,key){ if(_self.damage_cause == val.damageCauseCode){ damage_causename = val.damageCauseName; return ; } }) let damage_areaenvironmentname = ""; this.damage_areaenvironments.find(function(val,key){ if(_self.damage_areaenvironment == val.areaEnvironmentCode){ damage_areaenvironmentname = val.areaEnvironmentName; return ; } }) let damage_typename = ""; this.damage_types.find(function(val,key){ if(_self.damage_type == val.damageTypeCode){ damage_typename = val.damageTypesName; return ; } }) console.log(damage_areaenvironmentname+"fasdffjl;dsafj;lsd") // 2020-01-02 11:13李四接到我问问我报案，“出险设备为：”"三一2019挖掘机", // 于2020-01-02 11:43在北京市北京市东城区东华门街道天安门“附近的”“隧道”作业过程中发生地陷“意外事故” this.damage_text = formatDate(new Date(this.value_time), 'yyyy-MM-dd hh:mm') +personInChargeNames+"接到"+this.regist_name+"报案,出险设备为:"+this.item_no+", 于" +formatDate(new Date(this.regist_time), 'yyyy-MM-dd hh:mm') +"在"+this.provinceName+this.city+this.county+this.address+"附近的"+damage_areaenvironmentname +"作业过程中发生"+radioName+damage_typename }, open() { console.log("response_names.personInChargeName"+this.response_name); let _self = this; this.$confirm('将生成出险摘要经过, 是否继续?', '提示', { confirmButtonText: '继续', cancelButtonText: '取消', type: 'warning' }).then(() => { _self.initText() }).catch(() => { _self.$message({ type: 'info', message: '已取消' }) }) }, handleCheckedLossChange(value) { const checkedCount = value.length this.checkAll = checkedCount === this.cities.length this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length }, ecc: function () {}, changeDangerReason(type) { console.log(this.damage_type) console.log(this.damage_cause) if (("016,300,104,052,017,010,025,315,304,181").indexOf(this.damage_cause)>-1) { this.damage_type = '1' } else { this.damage_type = '2' } }, changeDangerCharacter() { this.reason1 = '' } }, beforeDestroy() { document.querySelector('body').style.backgroundColor = '#fff' if (this.snameAutoListener) { AMap.event.removeListener(this.snameAutoListener); } }, mounted() { }, created() { if(this.$route.path == "/newClaim/work-area/regist"){ this.fromDisabled = true; } if(this.$route.path == "/newClaim/regist"){ // this.fromDisabled = true; this.$root.nowClaimNo="" } console.log(this.$route.path) this.explicitImplicit= this.$route.params.explicitImplicit //出险性质 this.getparams() this.getCatastrophe() // this.getPolicyInfo() this.getDamageType() this.getDamageCauseOne() this.getPersonInCharge() // this.getDamageCauseTwo() this.getAreaEnvironment() this.getLosss() this.createRegist() // if(this.operateion_type!='regist'){ // if(this.createRegist()){ // this.operation_disable = false // }else{ // this.operation_disable = true // this.operation_show = false // } // }else{ // this.operation_disable = false // } this.operation_disable = false } } </script> <style> * { margin: 0; padding: 0; } .ysc-header { font-size: 0.28rem; text-align: center; } .addAddress input { height: 0.8rem; width: 100%; background: #fff; color: #262e31; font-size: 14px; border: none; /* margin: 0 .3rem; */ /* padding: 0 .3rem; */ } /* 地址选择弹层 */ .ac { color: #000 !important; border-bottom: 0.02rem solid #fff !important; } .myAddress { width: 100%; background-color: white; border-top: 4px solid rgba(245, 245, 245, 1); color: #333; } .myAddress .cont { border-bottom: 1px solid rgba(245, 245, 245, 0.8); } .myAddress .cont span { display: inline-block; font-size: 0.28rem; color: #333; line-height: 0.88rem; margin-left: 0.32rem; } .myAddress .cont section { float: left; } .myAddress .cont p { display: inline-block; font-size: 0.28rem; color: #333333; line-height: 0.88rem; margin-left: 1rem; } .myAddress .cont .pic2 { float: right; width: 0.14rem; height: 0.24rem; margin: 0.32rem 0.32rem 0.32rem 0; } .myAddress .cont p.text { margin-left: 0.72rem; } .address { position: absolute; bottom: 0; left: 110px; z-index: 121; background: #fff; width: 75%; height: 0; overflow: hidden; transition: height 0.8s; } .toggHeight { height: 7.7rem; } .layout { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 120; opacity: 0; transition: all 0.5s; background: rgb(53, 58, 60); visibility: hidden; } .layoutBg { opacity: 0.7; visibility: visible; } .title { height: 25px; border-bottom: 0.01rem solid #8a96a3; } .aaaaa { /* align-items: center; */ text-align: center; margin-left: auto; /* vertical-align: middle */ } .horizontalLine { width: 100%; margin: 20px auto; border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); } .frameStyle { border: 1px solid #e9e7e7; padding: 10px; width: 100%; margin-left: -0px; } </style>mapUtils.vue
-
<template> <div> <div class="amap-page-container"> <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"> </el-amap-search-box> <el-amap ref="map" vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo" :events="events"> <el-amap-marker vid="component-marker" :position="makerConf.position" :content="makerConf.content"> </el-amap-marker> </el-amap> <!-- <el-button @click="close()"/> --> </div> <!-- <div class="adrs"> <ul> <li class="" v-for="(item,index) in list" :key="index" :class="currIndex == index ? 'active':''" @click="select(item,index)"> <p class="address">{{item.address}}</p> <p class="nm">{{item.name}}</p> </li> </ul> </div> --> </div> </template> <script> export default { name: 'amap-page', components: {}, inject:['address'], props:{'addresss':String}, data() { var me = this; me.city = me.city || '北京'; return { address:"", params:{}, list: [], currIndex: 0, zoom: 10, center: [116.397477, 39.908692], events: { init: (o) => { console.log("0") console.log(o) var geocoder = new AMap.Geocoder({ }); me.marker = new AMap.Marker(); if(me.addresss==""){ geocoder.getLocation("北京市天安门", function(status, result) { if (status === 'complete'&&result.geocodes.length) { var lnglat = result.geocodes[0].location; me.marker.setPosition(lnglat); o.add(me.marker); // o.setFitView(me.marker); // o.setFitView(); }else{ log.error('根据地址查询位置失败'); } }); }else{ console.log("jfkdsjfkas;"+"hahahahahah") console.log(me.addresss) geocoder.getLocation(me.addresss, function(status, result) { if (status === 'complete'&&result.geocodes.length) { var lnglat = result.geocodes[0].location; me.marker.setPosition(lnglat); o.add(me.marker); o.setFitView(me.marker); }else{ log.error('根据地址查询位置失败'); } }); } }, click(e) { console.log("jfkdsajsad;l") console.log(e) let { lng, lat } = e.lnglat; me.lng = lng; me.lat = lat; // 这里通过高德 SDK 完成。 var geocoder = new AMap.Geocoder({ radius: 5, extensions: "all" }); geocoder.getAddress([lng ,lat], function(status, result) { if (status === 'complete' && result.info === 'OK') { if (result && result.regeocode) { me.address = result.regeocode.formattedAddress; me.params = { "address":result.regeocode.formattedAddress, "provinceName":result.regeocode.addressComponent.province, "cityName":result.regeocode.addressComponent.city, "districtName":result.regeocode.addressComponent.district, "provinceCode":result.regeocode.addressComponent.provinceCode, "cityCode":result.regeocode.addressComponent.cityCode, "districtCode":result.regeocode.addressComponent.districtCode } me.marker.setPosition([lng ,lat]); me.$emit('addressInfoListen', me.params); } } }); }, "dragend": function (e) { //console.log("dragging",e,this.getCenter()); // var point = this.getCenter(); // var pos = [point.lng, point.lat]; // me.makerConf.position = [point.lng, point.lat]; // me.getList(pos); } }, makerConf: { position: [114.397169, 30.50576], content: "" }, searchOption: { city: me.city, citylimit: true }, plugin:[], // plugin: [ // 'ToolBar', // 'Scale', // 'Autocomplete', // 'PlaceSearch', // 'PlaceSearchLayer', // { // pName: 'Geolocation', // events: { // init(o) {}, // complete: function (result) { // //定位成功 // var address = result.formattedAddress // //展示详细地址 // var point = result.position; // //经纬度展示 // var obj = { // address: address, // name: "", // location: point // } // me.list = [obj]; // me.makerConf.position = [point.lng, point.lat]; // }, // error: function () {} // } // } // ], }; }, created() { var me = this; }, mounted() {}, methods: { close(){ this.$emit('addressInfoListen', this.params) }, select: function (item, index) { var me = this; me.currIndex = index; var point = item.location; me.makerConf.position = [point.lng, point.lat]; me.center = [point.lng, point.lat]; }, //this.$refs.map.$$getCenter() getList: function (result) { //获取列表 var me = this; me.$Geocoder({ lnglatXY: result, success: function (res) { if (res.regeocode && res.regeocode.pois) { me.list = res.regeocode.pois; } else { me.list = []; } }, error: function (res) { me.list = []; } }); }, onSearchResult(pois) { //搜索 let latSum = 0; let lngSum = 0; var me = this; var mymap = me.$refs.map.$$getInstance(); if (pois && pois.length > 0) { //如果长度为1则无需转化 var poi = pois[0]; var lng = poi["lng"]; var lat = poi["lat"]; me.center = [lng, lat]; me.makerConf.position = [lng, lat]; var jingdu=me.makerConf.position[0]; var weidu=me.makerConf.position[1]; // alert("经度"+jingdu) // alert("纬度"+weidu) //me.makerConf.content = poi.name; me.list = pois; } else { me.list = []; } }, $Geocoder(options) { //将坐标点转化为，详细地址 options = options || {}; if (AMap) { AMap.plugin(['AMap.Geocoder'], () => { const geocoder = new AMap.Geocoder({ radius: options.radius || 1000, extensions: options.extensions || "all" }) var lnglatXY = options.lnglatXY || [114.397169, 30.50576]; //已知点坐标 geocoder.getAddress(lnglatXY, function (status, result) { if (status === 'complete' && result.info === 'OK') { options.success && options.success(result); } else { options.error && options.error(status, result); } }); }); } } }, "watch": { list: function () { this.currIndex = 0; } } }; </script> <style> .amap-page-container { height: 500px; width: 880px; position: relative; /* padding: 10px */ } .search-box { position: absolute !important; top: 10px; left: 60px; z-index: 200 !important; } .amap-demo { height: 400px; } .amap-logo { display: none; } .amap-copyright { bottom: -100px; display: none; } .amap-scalecontrol { bottom: 4px !important; } .amap-geolocation-con { bottom: 30px !important; z-index: 299 !important; } ul li.active { color: deeppink; } </style>
1046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
