|
|
@@ -0,0 +1,455 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div v-if="visible" class="dialog-wrap">
|
|
|
+ <div class="dialog">
|
|
|
+ <div class="dialog-header">
|
|
|
+ <div class="dialog-title">{{ title }}</div>
|
|
|
+ <div class="icon-close" @click="handleClose">
|
|
|
+ <el-icon size="40px"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-content">
|
|
|
+ <el-form ref="queryFormRef" :model="form" :rules="rules" :inline="true">
|
|
|
+ <el-form-item label="详细地址" prop="address">
|
|
|
+ <el-input v-model="form.address" placeholder="请输入" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="经度" prop="longitude">
|
|
|
+ <el-input v-model="form.longitude" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="纬度" prop="latitude">
|
|
|
+ <el-input v-model="form.latitude" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" size="large" @click="submit">确定</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div ref="containerRef" class="map_box">
|
|
|
+ <div id="map" class="map" :style="{ width: width, height: height }"></div>
|
|
|
+ <div class="search">
|
|
|
+ <!-- @input="handleInput(0)" -->
|
|
|
+ <el-input v-model="location" placeholder="请输入地址" />
|
|
|
+ <el-button class="btn" type="primary" @click="handleInput(0)">搜索</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="searchPop" class="scroll_box">
|
|
|
+ <div style="height: 30px; line-height: 30px">
|
|
|
+ <span style="font-weight: bold">搜索结果列表</span>
|
|
|
+ <i class="el-icon-close" style="float: right; font-size: 20px; cursor: pointer" @click="closeSearchList()" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-scrollbar class="scroll" style="height: 250px">
|
|
|
+ <div v-for="(item, index) in searchList" v-show="searchList.length" :key="index" class="item" @click="handlePanTo(index)">
|
|
|
+ <el-image class="img" :src="item.img" :alt="item.name" lazy>
|
|
|
+ <template #error>
|
|
|
+ <div class="image-slot">
|
|
|
+ <i class="el-icon-picture-outline"></i>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ <div>
|
|
|
+ <div class="text">{{ item.name }}</div>
|
|
|
+ <div>{{ item.address }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="!searchList.length" class="empty" style="text-align: center">没有搜索到内容</div>
|
|
|
+ </el-scrollbar>
|
|
|
+
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ small
|
|
|
+ :hide-on-single-page="true"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="pageNum"
|
|
|
+ style="margin-top: 10px"
|
|
|
+ @current-change="handleChangePage"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: () => {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+const router = useRouter();
|
|
|
+const emits = defineEmits(['update:visible']);
|
|
|
+// 地图对象
|
|
|
+let map = null;
|
|
|
+let amap = {};
|
|
|
+let location = ref('');
|
|
|
+let marker = null; //地图上的点标记
|
|
|
+let contextMenu = null;
|
|
|
+let lnglatPosition = ref([]); //选中的新坐标
|
|
|
+let rules = reactive({
|
|
|
+ address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
|
|
|
+ longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
|
|
|
+ latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }]
|
|
|
+});
|
|
|
+let pageNum = ref(1);
|
|
|
+let pageSize = ref(10);
|
|
|
+let total = ref(0);
|
|
|
+
|
|
|
+let searchList = ref([]);
|
|
|
+let searchPop = ref(false);
|
|
|
+let placeSearch;
|
|
|
+let form = reactive({
|
|
|
+ address: '',
|
|
|
+ longitude: '',
|
|
|
+ latitude: ''
|
|
|
+});
|
|
|
+let open = ref(false);
|
|
|
+let geocoder = {};
|
|
|
+let width = ref('100%');
|
|
|
+let height = ref('100%');
|
|
|
+watch(
|
|
|
+ () => props.visible,
|
|
|
+ (n) => {
|
|
|
+ if (n) {
|
|
|
+ nextTick(() => {
|
|
|
+ initMap();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+onMounted(() => {
|
|
|
+ window.addEventListener('resize', handleResize);
|
|
|
+});
|
|
|
+onUnmounted(() => {
|
|
|
+ if (!!map) {
|
|
|
+ map.off('rightclick');
|
|
|
+ map.destroy();
|
|
|
+ map = null;
|
|
|
+ }
|
|
|
+ window.removeEventListener('resize', handleResize);
|
|
|
+});
|
|
|
+
|
|
|
+function handleInput(flag) {
|
|
|
+ if (!location.value) return;
|
|
|
+
|
|
|
+ if (!flag) {
|
|
|
+ //搜索
|
|
|
+ total.value = 0;
|
|
|
+ pageNum.value = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!placeSearch) {
|
|
|
+ placeSearch = new amap.PlaceSearch({
|
|
|
+ pageSize: 10, // 每页条数，默认10，范围1-50
|
|
|
+ pageIndex: 1, // 页码
|
|
|
+ extensions: 'all' // 默认base，返回基本地址信息；all：返回详细信息
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ searchPop.value = true;
|
|
|
+ placeSearch.setPageIndex(pageNum.value);
|
|
|
+ placeSearch.search(location.value, (status, result) => {
|
|
|
+ // console.log(result.poiList.pois, 'result')
|
|
|
+ if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
|
|
|
+ let arr = [];
|
|
|
+ const pois = result.poiList.pois;
|
|
|
+ total.value = result.poiList ? result.poiList.count : 0;
|
|
|
+ arr = pois.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item.name,
|
|
|
+ address: item.address,
|
|
|
+ img: item.photos[0]?.url,
|
|
|
+ lnglat: [item.location.lng, item.location.lat]
|
|
|
+ };
|
|
|
+ });
|
|
|
+ searchList.value = arr;
|
|
|
+ } else {
|
|
|
+ total.value = 0;
|
|
|
+ searchList.value = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function handleChangePage(newNum) {
|
|
|
+ if (!searchPop.value) return;
|
|
|
+ pageNum.value = newNum;
|
|
|
+ this.handleInput(1);
|
|
|
+}
|
|
|
+
|
|
|
+function closeSearchList() {
|
|
|
+ searchPop.value = false;
|
|
|
+ location.value = '';
|
|
|
+ searchList.value = [];
|
|
|
+ total.value = 0;
|
|
|
+ pageNum.value = 1;
|
|
|
+}
|
|
|
+
|
|
|
+// 地图中心的平移至指定点位置
|
|
|
+function handlePanTo(index) {
|
|
|
+ let lnglat = searchList.value[index].lnglat;
|
|
|
+ form.longitude = searchList.value[index].name + '(' + searchList.value[index] + ')';
|
|
|
+ form.latitude = lnglat[0];
|
|
|
+ form.latitude = lnglat[1];
|
|
|
+ map.panTo(lnglat);
|
|
|
+ setMarks(lnglat);
|
|
|
+ closeSearchList();
|
|
|
+}
|
|
|
+
|
|
|
+const initMap = async () => {
|
|
|
+ let position = [110.93154257997, 21.669064031332];
|
|
|
+ const AMap = await AMapLoader.load({
|
|
|
+ key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ plugins: ['AMap.PlaceSearch', 'AMap.ContextMenu', 'AMap.PolygonEditor', 'AMap.Geocoder'] // 插件列表
|
|
|
+ });
|
|
|
+ map = new AMap.Map('map', {
|
|
|
+ viewMode: '3D', //是否为3D地图模式
|
|
|
+ center: position,
|
|
|
+ zoom: 15
|
|
|
+ });
|
|
|
+ amap = AMap;
|
|
|
+ geocoder = new AMap.Geocoder({
|
|
|
+ // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
+ city: '010'
|
|
|
+ });
|
|
|
+ // 创建右键菜单
|
|
|
+ ContextMenu();
|
|
|
+ map.on('rightclick', handleRightclick);
|
|
|
+ handleResize();
|
|
|
+};
|
|
|
+
|
|
|
+function ContextMenu() {
|
|
|
+ contextMenu = new AMap.ContextMenu();
|
|
|
+ contextMenu.addItem(
|
|
|
+ '选择标点',
|
|
|
+ () => {
|
|
|
+ form.longitude = lnglatPosition.value[0];
|
|
|
+ form.latitude = lnglatPosition.value[1];
|
|
|
+ contextMenu.close();
|
|
|
+ let lnglat = [form.longitude, form.latitude];
|
|
|
+ geocoder.getAddress(lnglat, (status, result) => {
|
|
|
+ if (status === 'complete' && result.info === 'OK') {
|
|
|
+ form.address = result.regeocode.formattedAddress;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ setMarks(lnglat);
|
|
|
+ },
|
|
|
+ 1
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+// 右键事件
|
|
|
+function handleRightclick(e) {
|
|
|
+ let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
|
|
|
+ contextMenu.open(map, e.lnglat);
|
|
|
+ lnglatPosition.value = lnglat;
|
|
|
+}
|
|
|
+
|
|
|
+function setMarks(lnglat) {
|
|
|
+ //添加标记
|
|
|
+ if (marker) map.remove(marker);
|
|
|
+ marker = new AMap.Marker({
|
|
|
+ position: lnglat,
|
|
|
+ icon: new AMap.Icon({
|
|
|
+ size: new AMap.Size(22, 28), //图标所处区域大小
|
|
|
+ imageSize: new AMap.Size(22, 28), //图标大小
|
|
|
+ image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
|
|
|
+ }),
|
|
|
+ anchor: 'bottom-center',
|
|
|
+ offset: new AMap.Pixel(0, 0)
|
|
|
+ });
|
|
|
+ marker.setMap(map);
|
|
|
+}
|
|
|
+
|
|
|
+function handleClose() {
|
|
|
+ emits('update:visible', false);
|
|
|
+}
|
|
|
+
|
|
|
+let queryFormRef = ref();
|
|
|
+let containerRef = ref();
|
|
|
+
|
|
|
+function handleResize() {
|
|
|
+ const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 8960);
|
|
|
+ const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
|
|
|
+ width.value = containerWidth + 'px';
|
|
|
+ height.value = containerHeight + 'px';
|
|
|
+ nextTick(() => {
|
|
|
+ map.resize();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function submit() {
|
|
|
+ queryFormRef.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('提交数据', form);
|
|
|
+ router.push({
|
|
|
+ path: '/emergencyCommandMap',
|
|
|
+ query: { id: '11111111' }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.map_box {
|
|
|
+ position: relative;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.search {
|
|
|
+ width: 50%;
|
|
|
+ position: absolute;
|
|
|
+ right: 2%;
|
|
|
+ top: 10px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 8px 8px;
|
|
|
+ border-radius: 3px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll_box {
|
|
|
+ width: 50%;
|
|
|
+ padding-top: 30px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ right: 2%;
|
|
|
+ top: 70px;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 3px;
|
|
|
+
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ right: 2%;
|
|
|
+ top: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.scroll {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 250px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 8px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 50px;
|
|
|
+ height: 45px;
|
|
|
+ min-width: 50px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::v-deep {
|
|
|
+ .image-slot {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-picture-outline {
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #3385ff;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep {
|
|
|
+ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .is-horizontal {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.empty {
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-wrap {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 2000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ .dialog {
|
|
|
+ width: 4000px;
|
|
|
+ height: 2000px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dialog {
|
|
|
+ padding: 0 20px;
|
|
|
+
|
|
|
+ .dialog-header {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .dialog-title {
|
|
|
+ font-size: 36px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-close {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-content {
|
|
|
+ padding: 10px 0;
|
|
|
+
|
|
|
+ .map_box {
|
|
|
+ width: calc(4000px - 50px) !important;
|
|
|
+ height: calc(2000px - 200px) !important;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
