434 lines
13 KiB
Vue
434 lines
13 KiB
Vue
<!-- @format -->
|
||
|
||
<template>
|
||
<div style="display: flex">
|
||
<a-form-item-rest>
|
||
<div class="rightBox">
|
||
<div class="inputArea">
|
||
<div style="margin-right: 10px">经度</div>
|
||
<div class="longitude">
|
||
<ns-input
|
||
v-model:value="longitude1"
|
||
type="number"
|
||
class="input"
|
||
placeholder="请输入经度"
|
||
@change="inputChange('longitude', $event)" /> </div
|
||
><div style="margin: 0 10px">纬度</div>
|
||
<div class="latitude">
|
||
<ns-input
|
||
v-model:value="latitude1"
|
||
type="number"
|
||
class="input"
|
||
placeholder="请输入纬度"
|
||
@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="address" class="inputAdress" placeholder="请输入地址" />
|
||
<ns-button type="primary" @click="onSearch">查询</ns-button>
|
||
</div>
|
||
<div class="mapArea">
|
||
<div id="map-container" style="width: 600px"></div>
|
||
<div v-if="isShowResult" id="map-result" style="width: 600px; overflow: auto"></div>
|
||
</div>
|
||
</div>
|
||
</a-form-item-rest>
|
||
</div>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent, watch, ref, reactive } from 'vue';
|
||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||
import { shallowRef } from '@vue/reactivity';
|
||
|
||
export default defineComponent({
|
||
name: 'NsMap',
|
||
props: {
|
||
titleName: {
|
||
type: String,
|
||
default: '位置信息',
|
||
},
|
||
longitude: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
latitude: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
defaultAddress: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
value: {
|
||
type: [Object, String],
|
||
},
|
||
longLat: {
|
||
type: Object,
|
||
},
|
||
},
|
||
emits: ['change', 'updata:longLat'],
|
||
setup(props, context) {
|
||
const map = shallowRef(null);
|
||
return {
|
||
map,
|
||
};
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
address: '',
|
||
longitude1: '',
|
||
latitude1: '',
|
||
longLatTudeobj: {
|
||
longitude: '',
|
||
latitude: '',
|
||
},
|
||
localSearch: '',
|
||
geoc: '',
|
||
initMarker: '',
|
||
AMap: {},
|
||
isShowResult: false,
|
||
// map: '',
|
||
};
|
||
},
|
||
watch: {
|
||
// value(val) {
|
||
// if (val.latitude) {
|
||
// this.longitude1 = val.longitude;
|
||
// this.latitude1 = val.latitude;
|
||
// this.longLatTudeobj.latitude = val.latitude;
|
||
// this.longLatTudeobj.longitude = val.longitude;
|
||
// this.initMap();
|
||
// }
|
||
// // if (val) {
|
||
// // console.log('value', val);
|
||
// // // this.$emit('change', [
|
||
// // // this.longLatTudeobj.latitude,
|
||
// // // this.longLatTudeobj.longitude,
|
||
// // // this.address,
|
||
// // // ]);
|
||
// // this.initMap();
|
||
// // }
|
||
|
||
// // this.$emit('change', [
|
||
// // this.longLatTudeobj.latitude,
|
||
// // this.longLatTudeobj.longitude,
|
||
// // this.address,
|
||
// // ]);
|
||
// },
|
||
address(val) {
|
||
if (val) {
|
||
this.address = val;
|
||
this.$emit('change', [
|
||
this.longLatTudeobj.latitude,
|
||
this.longLatTudeobj.longitude,
|
||
this.address,
|
||
]);
|
||
}
|
||
},
|
||
longitude1(val) {
|
||
this.longLatTudeobj.longitude = val;
|
||
if (val)
|
||
this.$emit('change', [
|
||
this.longLatTudeobj.latitude,
|
||
this.longLatTudeobj.longitude,
|
||
this.address,
|
||
]);
|
||
// this.$emit('updata:longLat', this.longLatTudeobj);
|
||
},
|
||
latitude1(val) {
|
||
this.longLatTudeobj.latitude = val;
|
||
if (val)
|
||
this.$emit('change', [
|
||
this.longLatTudeobj.latitude,
|
||
this.longLatTudeobj.longitude,
|
||
this.address,
|
||
]);
|
||
},
|
||
defaultAddress: {
|
||
handler(val) {
|
||
if (this.longitude && this.latitude) {
|
||
this.address = val;
|
||
}
|
||
},
|
||
immediate: true,
|
||
// deep: true,
|
||
},
|
||
},
|
||
created() {
|
||
if (this.longitude) {
|
||
this.longitude1 = this.longitude;
|
||
this.latitude1 = this.latitude;
|
||
} else {
|
||
// this.onSearch();
|
||
}
|
||
if (this.localSearch) {
|
||
console.log('mapClear');
|
||
|
||
this.localSearch.render.markerList.clear();
|
||
}
|
||
// this.onSearch();
|
||
// this.longitude1 = this.longLat.longitude;
|
||
// this.latitude1 = this.longLat.latitude;
|
||
// console.log(this.longitude1);
|
||
},
|
||
mounted() {
|
||
// this.map = new AMap.Map('map-container', {
|
||
// // center: [117.000923, 36.675807],
|
||
// resizeEnable: true,
|
||
// zoom: 12,
|
||
// });
|
||
// this.geoc = new AMap.Geocoder({
|
||
// city: '021',
|
||
// });
|
||
this.initMap();
|
||
},
|
||
beforeUnmount() {
|
||
this.map && this.map.destroy();
|
||
this.isShowResult = false;
|
||
},
|
||
// https://webapi.amap.com/maps?v=1.4.15&key=&plugin=&
|
||
methods: {
|
||
// clear() {
|
||
// console.log('mapClear');
|
||
|
||
// // this.localSearch.render.markerList.clear();
|
||
// this.map && this.map.destroy();
|
||
// this.isShowResult = false;
|
||
// },
|
||
initMap() {
|
||
AMapLoader.reset();
|
||
AMapLoader.load({
|
||
key: '2694972059c3b978de5d7e073efdfc64', // 申请好的Web端开发者Key，首次调用 load 时必填
|
||
version: '1.4.15',
|
||
plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.ToolBar'],
|
||
})
|
||
.then((AMap) => {
|
||
// 需要传入AMap ，否则方法无法调用
|
||
this.loadMap(AMap);
|
||
this.AMap = AMap;
|
||
})
|
||
.catch((e) => {
|
||
console.log(e);
|
||
});
|
||
},
|
||
loadMap(AMap) {
|
||
this.map = new AMap.Map('map-container', {
|
||
// center: [117.000923, 36.675807],
|
||
resizeEnable: true,
|
||
zoom: 12,
|
||
});
|
||
this.geoc = new AMap.Geocoder({
|
||
city: '021',
|
||
});
|
||
// 初始化地图,设置城市和地图级别。
|
||
// if (this.address) {
|
||
// this.map.centerAndZoom(this.address, 11);
|
||
// }
|
||
if (this.longitude1 && this.latitude1) {
|
||
let position = [this.longitude1, this.latitude1];
|
||
const marker = new AMap.Marker({
|
||
position: [this.longitude1, this.latitude1],
|
||
offset: new AMap.Pixel(-13, -30),
|
||
map: this.map,
|
||
});
|
||
this.initMarker = marker;
|
||
this.geoc.getAddress(position, (status, result) => {
|
||
if (status == 'complete' && result.info == 'OK') {
|
||
const addComp = result['regeocode']['addressComponent'];
|
||
thisObj.address =
|
||
addComp.province +
|
||
addComp.city +
|
||
addComp.district +
|
||
addComp.street +
|
||
addComp.streetNumber;
|
||
this.address = thisObj.address;
|
||
}
|
||
});
|
||
this.map.add(marker);
|
||
this.map.setFitView(marker);
|
||
if (AMap.event) {
|
||
// 标记物点击事件
|
||
AMap.event.addListener(marker, 'click', function (e) {
|
||
// console.log('点击标记物');
|
||
// console.log(e);
|
||
// thisObj.resultPanelClick(e['data']);
|
||
});
|
||
}
|
||
}
|
||
const thisObj = this;
|
||
// AMap.service(['AMap.PlaceSearch'], function () {
|
||
// 回调函数
|
||
// 实例化PlaceSearch
|
||
thisObj.localSearch = new AMap.PlaceSearch({
|
||
pageSize: 5, // 每页显示多少行
|
||
pageIndex: 1, // 显示的下标从那个开始
|
||
type: '', // 类别，可以以|后面加其他类
|
||
city: '021',
|
||
// map: thisObj.map, // 显示地图
|
||
panel: 'map-result', // 服务显示 的面板
|
||
autoFitView: true,
|
||
});
|
||
// });
|
||
|
||
if (AMap.event) {
|
||
// 搜索结果列表的点标记
|
||
AMap.event.addListener(thisObj.localSearch, 'listElementClick', (e) => {
|
||
thisObj.resultPanelClick(e['data']);
|
||
});
|
||
// 标记物点击
|
||
AMap.event.addListener(thisObj.localSearch, 'markerClick', function (e) {
|
||
// console.log('搜索结果标记物点击');
|
||
thisObj.resultPanelClick(e['data']);
|
||
});
|
||
}
|
||
|
||
// 地图点击事件
|
||
this.map.on('click', (e) => {
|
||
thisObj.getLatitudeAndLongitude(e);
|
||
});
|
||
// 如果默认地址
|
||
// if (this.data['address']) {
|
||
// this.address = this.data['address'];
|
||
// this.localSearch.search(this.address);
|
||
// }
|
||
},
|
||
resultPanelClick(data) {
|
||
if (data && data['location']) {
|
||
if (data['location']) {
|
||
const location = data['location']; // 当前marker的经纬度信息
|
||
this.longitude1 = location['lng'].toFixed(6);
|
||
this.latitude1 = location['lat'].toFixed(6);
|
||
}
|
||
if (data['address']) {
|
||
this.address = data['address'];
|
||
}
|
||
}
|
||
},
|
||
|
||
getLatitudeAndLongitude(event) {
|
||
if (event) {
|
||
// 清除搜索标记
|
||
// if (this.localSearch && this.localSearch['render']) {
|
||
// this.localSearch.render.markerList.clear();
|
||
// }
|
||
// 清除初始化标记
|
||
if (this.initMarker) {
|
||
this.map.remove(this.initMarker);
|
||
}
|
||
this.map.clearMap();
|
||
// 获取当前点击点的经纬度和地址信息
|
||
this.longitude1 = event.lnglat['lng'].toFixed(6);
|
||
this.latitude1 = event.lnglat['lat'].toFixed(6);
|
||
const thisObj = this;
|
||
this.geoc.getAddress(event.lnglat, function (status, result) {
|
||
if (status == 'complete' && result.info == 'OK') {
|
||
const addComp = result['regeocode']['addressComponent'];
|
||
thisObj.address =
|
||
addComp.province +
|
||
addComp.city +
|
||
addComp.district +
|
||
addComp.street +
|
||
addComp.streetNumber;
|
||
}
|
||
});
|
||
// 点击地图上标记物之外的点
|
||
let marker = new this.AMap.Marker({
|
||
position: [this.longitude1, this.latitude1],
|
||
// offset: new AMap.Pixel(-13, -30),
|
||
map: this.map,
|
||
});
|
||
this.initMarker = marker;
|
||
this.map.add(marker);
|
||
this.map.setFitView();
|
||
// 创建信息窗口
|
||
// const infoWindow = new AMap.InfoWindow({
|
||
// // isCustom: true, //使用自定义窗体
|
||
// content: '信息的html代码字符串',
|
||
// offset: new AMap.Pixel(-15, -25)
|
||
// });
|
||
// infoWindow.open(this.map, marker.getPosition());
|
||
}
|
||
},
|
||
onSearch() {
|
||
this.isShowResult = true;
|
||
// console.log(this.address);
|
||
const _this = this;
|
||
// 清除点击的标记物
|
||
// if (this.initMarker) {
|
||
// this.map.remove(this.initMarker);
|
||
// }
|
||
this.map.clearMap();
|
||
// 搜索
|
||
if (!this.localSearch) return;
|
||
this.localSearch.search(this.address, (status, result) => {
|
||
if (status == 'complete' && result.info == 'OK') {
|
||
const resultPoi = result['poiList']['pois'];
|
||
if (resultPoi && resultPoi instanceof Array && resultPoi.length > 0) {
|
||
const firstPo = resultPoi[0]; // 搜索后默认选中第一个点
|
||
// this.resultArr = [];
|
||
const pois = result.poiList.pois;
|
||
// console.log(pois[0].location.lng, pois[1].location.lat);
|
||
_this.longitude1 = pois[0].location.lng;
|
||
_this.latitude1 = pois[1].location.lat;
|
||
for (let i = 0; i < pois.length; i++) {
|
||
const poi = pois[i];
|
||
const marker = [];
|
||
marker[i] = new AMap.Marker({
|
||
position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||
title: poi.name,
|
||
});
|
||
// 将创建的点标记添加到已有的地图实例：
|
||
// this.resultArr.push(marker[i]);
|
||
this.map.add(marker[i]);
|
||
}
|
||
|
||
this.map.setFitView();
|
||
}
|
||
} else {
|
||
}
|
||
});
|
||
|
||
// this.$emit('change', obj);
|
||
// this.$emit('updata:longLat', obj);
|
||
},
|
||
inputChange(val, e) {
|
||
let value = e.target.value;
|
||
console.log(this.longitude1, this.latitude1, this.address);
|
||
console.log(value);
|
||
this.$emit('change', [
|
||
this.longLatTudeobj.latitude,
|
||
this.longLatTudeobj.longitude,
|
||
this.address,
|
||
]);
|
||
// this.$emit('updata:longLat', this.longLatTudeobj);
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
input::-webkit-outer-spin-button,
|
||
input::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
}
|
||
#map-container {
|
||
width: 600px;
|
||
height: 400px;
|
||
}
|
||
.leftBox,
|
||
.rightBox {
|
||
flex: 1;
|
||
}
|
||
.inputArea {
|
||
display: flex;
|
||
line-height: 30px;
|
||
}
|
||
.inputSearch {
|
||
.inputAdress {
|
||
width: 344px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
</style>
|