You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

385 lines
11 KiB

<!-- @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>