<template>
|
<el-button
|
type="primary"
|
icon="Memo"
|
class="el-button-custom p-events-auto"
|
@click="dialogVisible = !dialogVisible"
|
>
|
地理编码
|
</el-button>
|
<el-dialog v-model="dialogVisible" :show-close="false" align-center>
|
<template #header="{ close, titleId, titleClass }">
|
<BaseCard direction="top-left" borderless="t">
|
<template #content>
|
<el-row justify="space-between" align="middle">
|
<el-row align="middle">
|
<font-awesome-icon icon="fa fa-list" class="m-r-4" />
|
<span :id="titleId" :class="titleClass">地理编码</span>
|
</el-row>
|
<font-awesome-icon
|
icon="fa fa-times"
|
class="cursor-p m-r-4"
|
@click="close"
|
/>
|
</el-row>
|
</template>
|
</BaseCard>
|
</template>
|
<BaseCard size="medium">
|
<template #content>
|
<el-row class="mission-table">
|
<el-col :span="20">
|
<el-input
|
v-model="address"
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
type="textarea"
|
placeholder="Please input"
|
/>
|
<el-scrollbar height="calc(40vh - var(--bevel-length-2))">
|
<div v-for="item in location" :key="item.lng">
|
<span>{{ item.lng }}</span>
|
<span>,</span>
|
<span>{{ item.lat }}</span>
|
<!-- <span> | </span> -->
|
<!-- <span>{{ item.gpsLng }}</span>
|
<span>,</span>
|
<span>{{ item.gpsLat }}</span> -->
|
<span> | </span>
|
<span>{{ item.formattedAddress }}</span>
|
<!-- <span>{{ item.adcode }}</span> -->
|
</div>
|
</el-scrollbar>
|
</el-col>
|
<el-col :span="4" class="flex-col">
|
<div>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
@click="search"
|
>
|
查询坐标
|
</el-button>
|
</div>
|
<div>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
@click="convert"
|
>
|
GPS转高德坐标
|
</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
</template>
|
</BaseCard>
|
</el-dialog>
|
</template>
|
<script>
|
import calculate from '../../utils/map/calculate';
|
|
// eslint-disable-next-line no-undef
|
const geocoder = new AMap.Geocoder({
|
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
city: '上海',
|
district: '长宁区'
|
});
|
|
export default {
|
props: {},
|
data() {
|
return {
|
dialogVisible: false,
|
address: '',
|
location: []
|
};
|
},
|
computed: {},
|
methods: {
|
search() {
|
if (this.address == '') return;
|
const addressList = this.address.split('\n');
|
const res = [];
|
geocoder.getLocation(addressList, (status, result) => {
|
if (status === 'complete' && result.info === 'OK') {
|
// const gdList = result.geocodes.map((v) => {
|
// return [v.location.getLng(), v.location.getLat()];
|
// });
|
// calculate.convertFromGPS(gdList, (gd) => {
|
|
// });
|
for (let y = 0; y < result.geocodes.length; y++) {
|
const g = result.geocodes[y];
|
if (!g) continue;
|
const lng = g.location.getLng();
|
const lat = g.location.getLat();
|
const { formattedAddress, adcode, level } = g;
|
if (adcode == '310105') {
|
// const [gpsLng, gpsLat] = gd[i];
|
const findRes = res.find((v) => {
|
return v.formattedAddress == formattedAddress;
|
});
|
if (!findRes) {
|
for (let i = 0; i < addressList.length; i++) {
|
const a = addressList[i];
|
if (formattedAddress.match(a)) {
|
res.push({
|
lng,
|
lat,
|
// gpsLng,
|
// gpsLat,
|
formattedAddress,
|
adcode,
|
level
|
});
|
break;
|
}
|
}
|
}
|
}
|
}
|
this.location = res;
|
}
|
});
|
},
|
|
convert() {
|
if (this.address == '') return;
|
const gpsList = this.address.split('\n').map((v) => {
|
return v.split(',');
|
});
|
calculate.convertFromGPS(
|
gpsList,
|
(gd) => {
|
this.location = gd.map((v) => {
|
return {
|
lng: v[0],
|
lat: v[1]
|
};
|
});
|
},
|
'baidu'
|
);
|
}
|
}
|
};
|
</script>
|
<style>
|
.el-dialog {
|
--el-dialog-bg-color: transparent !important;
|
--el-dialog-title-font-size: var(--el-font-size-medium);
|
--el-dialog-content-font-size: 14px;
|
--el-dialog-padding-primary: 0px !important;
|
}
|
|
.el-dialog__title {
|
color: var(--font-color);
|
}
|
</style>
|
<style scoped>
|
.flex-col {
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
align-items: flex-end;
|
}
|
|
.mission-table {
|
height: 60vh;
|
}
|
</style>
|
