push
This commit is contained in:
xuziqiang
385
lib/component/form/map/mapV2.vue
Normal file
385
lib/component/form/map/mapV2.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div style="display: flex; width: 100%">
|
||||
<a-form-item-rest>
|
||||
<div class="rightBox">
|
||||
<div class="inputArea">
|
||||
<div style="margin-right: 10px">经度</div>
|
||||
<div class="longitude">
|
||||
<ns-input
|
||||
v-model:value="longLatTudeobj.longitude"
|
||||
type="number"
|
||||
class="input"
|
||||
placeholder="请输入经度"
|
||||
:disabled="viewOnly"
|
||||
@change="inputChange('longitude', $event)" /> </div
|
||||
><div style="margin: 0 10px">纬度</div>
|
||||
<div class="latitude">
|
||||
<ns-input
|
||||
v-model:value="longLatTudeobj.latitude"
|
||||
type="number"
|
||||
class="input"
|
||||
placeholder="请输入纬度"
|
||||
:disabled="viewOnly"
|
||||
@change="inputChange('latitude', $event)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="inputSearch" style="margin: 15px 0 15px 0">
|
||||
<label style="margin-right: 10px">地址</label>
|
||||
<ns-input
|
||||
v-model:value="longLatTudeobj.address"
|
||||
class="inputAdress"
|
||||
:disabled="viewOnly"
|
||||
placeholder="请输入地址" />
|
||||
<ns-button type="primary" @click="onSearch" :disabled="viewOnly">查询</ns-button>
|
||||
</div>
|
||||
<div class="mapArea">
|
||||
<div id="map-container"></div>
|
||||
<div v-if="isShowResult" id="map-result" style="overflow: auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item-rest>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, watch, ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import { shallowRef } from 'vue';
|
||||
import { isArray, isEqual, isEmpty } from 'lodash-es';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NsMapV2',
|
||||
props: {
|
||||
defaultValue: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
viewOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
fieldMap: {
|
||||
type: Object || Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
formModel: {
|
||||
type: Object || Array,
|
||||
},
|
||||
//兼容v1写法
|
||||
longitude: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
latitude: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
defaultAddress: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//兼容v1写法end
|
||||
},
|
||||
emits: ['change', 'updata:longLat'],
|
||||
setup(props, { emit }) {
|
||||
let map: Recordable;
|
||||
let geoc: any, localSearch: any, Amap: any;
|
||||
const isShowResult = ref(false);
|
||||
const hasload = ref(false);
|
||||
const longLatTudeobj = ref({
|
||||
longitude: '',
|
||||
latitude: '',
|
||||
address: '',
|
||||
});
|
||||
const delay = (time) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve(map);
|
||||
}, time);
|
||||
});
|
||||
};
|
||||
const circleDelay = async () => {
|
||||
let res = await delay(100);
|
||||
if (res) {
|
||||
return res;
|
||||
} else {
|
||||
return circleDelay();
|
||||
}
|
||||
};
|
||||
|
||||
//更新值
|
||||
const updateValue = async (event) => {
|
||||
if (!map) {
|
||||
//循环等待map初始化
|
||||
await circleDelay();
|
||||
}
|
||||
if (isArray(event)) {
|
||||
if (!event.length) return;
|
||||
longLatTudeobj.value['latitude'] = event[0] || '';
|
||||
longLatTudeobj.value['longitude'] = event[1] || '';
|
||||
longLatTudeobj.value['address'] = event[2] || '';
|
||||
|
||||
if (longLatTudeobj.value['latitude'] && longLatTudeobj.value['longitude']) {
|
||||
map.clearMap();
|
||||
getAddressBylnglat(longLatTudeobj.value, (res) => {
|
||||
longLatTudeobj.value.address = res;
|
||||
});
|
||||
addMark({ position: [event[1], event[0]] });
|
||||
map.setFitView();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const resultPanelClick = (data: { [x: string]: string }) => {
|
||||
if (data && data['location']) {
|
||||
if (data['location']) {
|
||||
const location = data['location']; // 当前marker的经纬度信息
|
||||
longLatTudeobj.value.longitude = location['lng'].toFixed(6);
|
||||
longLatTudeobj.value.latitude = location['lat'].toFixed(6);
|
||||
}
|
||||
if (data['address']) {
|
||||
longLatTudeobj.value.address = data['address'];
|
||||
}
|
||||
}
|
||||
};
|
||||
//搜索
|
||||
const onSearch = () => {
|
||||
isShowResult.value = true;
|
||||
map.clearMap();
|
||||
if (!localSearch) return;
|
||||
localSearch.search(longLatTudeobj.value.address, (status: string, result: Recordable) => {
|
||||
if (status == 'complete' && result.info == 'OK') {
|
||||
const resultPoi = result['poiList']['pois'];
|
||||
if (resultPoi && resultPoi instanceof Array && resultPoi.length > 0) {
|
||||
const pois = result.poiList.pois;
|
||||
for (let i = 0; i < pois.length; i++) {
|
||||
const poi = pois[i];
|
||||
const marker = [];
|
||||
marker[i] = addMark({
|
||||
position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||||
title: poi.name,
|
||||
});
|
||||
}
|
||||
map.setFitView();
|
||||
}
|
||||
} else {
|
||||
}
|
||||
});
|
||||
};
|
||||
//初始化
|
||||
const initMap = async () => {
|
||||
AMapLoader.load({
|
||||
key: '2694972059c3b978de5d7e073efdfc64', // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: '1.4.15',
|
||||
plugins: ['AMap.Geocoder', 'AMap.PlaceSearch'],
|
||||
})
|
||||
.then((AMap) => {
|
||||
Amap = AMap;
|
||||
// 需要传入AMap ，否则方法无法调用
|
||||
map = new AMap.Map('map-container', {
|
||||
// center: [117.000923, 36.675807],
|
||||
resizeEnable: true,
|
||||
zoom: 12,
|
||||
});
|
||||
//精准搜索插件
|
||||
geoc = new AMap.Geocoder({
|
||||
city: '021',
|
||||
});
|
||||
|
||||
//模糊匹配插件
|
||||
AMap.service('AMap.PlaceSearch', function () {
|
||||
// 回调函数
|
||||
// 实例化PlaceSearch
|
||||
localSearch = new AMap.PlaceSearch({
|
||||
pageSize: 5, // 每页显示多少行
|
||||
pageIndex: 1, // 显示的下标从那个开始
|
||||
type: '', // 类别，可以以|后面加其他类
|
||||
city: '021',
|
||||
panel: 'map-result', // 服务显示 的面板
|
||||
autoFitView: true,
|
||||
});
|
||||
});
|
||||
|
||||
if (AMap.event) {
|
||||
// 搜索结果列表的点标记
|
||||
AMap.event.addListener(localSearch, 'listElementClick', (e) => {
|
||||
resultPanelClick(e['data']);
|
||||
});
|
||||
// 标记物点击
|
||||
AMap.event.addListener(localSearch, 'markerClick', (e) => {
|
||||
// console.log('搜索结果标记物点击');
|
||||
resultPanelClick(e['data']);
|
||||
});
|
||||
}
|
||||
//不可编辑状态
|
||||
if (!props.viewOnly) {
|
||||
map.on('click', (e) => {
|
||||
map.clearMap();
|
||||
getAddressByaddress(e, (res) => {
|
||||
longLatTudeobj.value.address = res;
|
||||
longLatTudeobj.value.latitude = e.lnglat['lat'].toFixed(6);
|
||||
longLatTudeobj.value.longitude = e.lnglat['lng'].toFixed(6);
|
||||
});
|
||||
addMark({
|
||||
position: e.lnglat,
|
||||
});
|
||||
map.setFitView();
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((e) => {});
|
||||
};
|
||||
//根据经纬度搜索
|
||||
const getAddressBylnglat = (event, callBack) => {
|
||||
geoc.getAddress(event.lnglat, (status, result) => {
|
||||
if (status == 'complete' && result.info == 'OK') {
|
||||
const addComp = result['regeocode']['addressComponent'];
|
||||
let address =
|
||||
addComp.province +
|
||||
addComp.city +
|
||||
addComp.district +
|
||||
addComp.street +
|
||||
addComp.streetNumber;
|
||||
callBack(address, result);
|
||||
}
|
||||
});
|
||||
};
|
||||
//根据关键字搜索
|
||||
const getAddressByaddress = (event, callBack) => {
|
||||
geoc.getAddress(event.lnglat, function (status, result) {
|
||||
if (status == 'complete' && result.info == 'OK') {
|
||||
const addComp = result['regeocode']['addressComponent'];
|
||||
let address =
|
||||
addComp.province +
|
||||
addComp.city +
|
||||
addComp.district +
|
||||
addComp.street +
|
||||
addComp.streetNumber;
|
||||
callBack(address, result);
|
||||
}
|
||||
});
|
||||
};
|
||||
//添加点标记
|
||||
const addMark = (data: Recordable) => {
|
||||
let marker = new Amap.Marker(data);
|
||||
map.add(marker);
|
||||
};
|
||||
onMounted(async () => {
|
||||
await initMap();
|
||||
if (props.value.length) {
|
||||
updateValue(props.value);
|
||||
}
|
||||
if (props.defaultValue.length) {
|
||||
updateValue(props.defaultValue);
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
map.destroy();
|
||||
// localSearch.render.markerList.clear();
|
||||
isShowResult.value = false;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(newv, oldv) => {
|
||||
if (!isEqual(newv, oldv) && !isEqual(newv, longLatTudeobj.value)) {
|
||||
updateValue(newv);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => longLatTudeobj.value,
|
||||
(newv, oldv) => {
|
||||
if (newv) {
|
||||
emit('change', [newv['latitude'], newv['longitude'], newv['address']]);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.formModel,
|
||||
(newv, oldv) => {
|
||||
if (!isEmpty(newv) && props.fieldMap.length && !hasload.value) {
|
||||
if (isArray(props.value) && !isEmpty(props.value)) {
|
||||
return;
|
||||
}
|
||||
let longitude = [];
|
||||
props.fieldMap.forEach((el, i) => {
|
||||
longitude[i] = newv[el];
|
||||
});
|
||||
updateValue(longitude);
|
||||
hasload.value = true;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
//兼容老的处理方法
|
||||
watch(
|
||||
//
|
||||
() => [props.latitude, props.longitude, props.defaultAddress],
|
||||
//
|
||||
([latitude, longitude, defaultAddress]) => {
|
||||
console.log(latitude, longitude, defaultAddress);
|
||||
if (latitude && longitude) {
|
||||
updateValue([latitude, longitude, defaultAddress]);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
map,
|
||||
isShowResult,
|
||||
longLatTudeobj,
|
||||
onSearch,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
#map-container {
|
||||
height: 400px;
|
||||
}
|
||||
.leftBox,
|
||||
.rightBox {
|
||||
flex: 1;
|
||||
}
|
||||
.inputArea {
|
||||
display: flex;
|
||||
line-height: 30px;
|
||||
}
|
||||
.inputSearch {
|
||||
.inputAdress {
|
||||
width: 344px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user