From 4f3b3c4d2fcc27c59095e6ddded35a572000e8ee Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Tue, 14 Feb 2023 14:46:05 +0800
Subject: [PATCH] 安保管理地图选点地址回显
---
src/components/map/searchMap.vue | 49 ++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 38 insertions(+), 11 deletions(-)
diff --git a/src/components/map/searchMap.vue b/src/components/map/searchMap.vue
index dd391d3..4c46997 100644
--- a/src/components/map/searchMap.vue
+++ b/src/components/map/searchMap.vue
@@ -1,8 +1,24 @@
<template>
<div class="basic-container">
<div class="search-line">
- <el-input class="search-input" v-model="queryString" placeholder="请输入内容"></el-input>
- <el-button class="search-button" @click="getAddressByQuery">查询</el-button>
+ <el-select
+ class="search-input"
+ v-model="queryString"
+ filterable
+ remote
+ reserve-keyword
+ placeholder="请输入关键词"
+ :remote-method="remoteMethod"
+ :loading="loading"
+ @change="selectChange">
+ <el-option
+ v-for="item in searchList"
+ :key="item.uid"
+ :label="item.address"
+ :value="JSON.stringify(item)">
+ </el-option>
+ </el-select>
+<!-- <el-button class="search-button" @click="getAddressByQuery">查询</el-button>-->
</div>
<search-map-box ref="OpenLayersMap" @getMapData="getMapData" :route-range="point"
:is-detail="true"></search-map-box>
@@ -12,6 +28,7 @@
<script>
import SearchMapBox from "@/components/map/searchMapBox";
import {getAoiByPt, search, searchByLonLat, searchByQuery} from "@/api/security/security";
+import data from "@/views/util/data";
export default {
name: "searchMap",
@@ -25,6 +42,8 @@
latitude: "",
queryString: "",
point: "",
+ searchList:[],
+ loading:false,
}
},
watch:{
@@ -45,13 +64,18 @@
this.latitude = data[0][1]
this.$emit("getLonLat", data[0])
},
+ remoteMethod(data){
+ this.queryString = data
+ this.getAddressByQuery()
+ },
getAddressByQuery() {
let ak = this.ak
let region = this.region
let query = this.queryString
let ids = "61743e28bbf11700e9fc4ef03dd8bea9"
searchByQuery(ak,region,query,ids).then(res => {
- console.log(res)
+ let dataList = res.data.result
+ this.searchList = dataList
})
},
getAddressByLonLat(){
@@ -59,15 +83,20 @@
let query = ""
let region = this.region
let region_type = "circle"
- let page_size = "3"
+ let page_size = "1"
let page_num = "1"
let infos = 1
- let radius = 10
+ let radius = 500
let location = this.longitude+" "+this.latitude
-
searchByLonLat(ak,query,region,region_type,page_size,page_num,infos,radius,location).then(res=>{
- console.log(res)
+ let data = res.data.result[0]
+ this.queryString = data.address
+ this.$emit("getAddress",this.queryString)
})
+ },
+ selectChange(data){
+ let selectData = JSON.parse(data)
+ this.$refs.OpenLayersMap.setView(selectData.location)
}
}
}
@@ -76,14 +105,12 @@
<style scoped>
.search-line {
display: flex;
+ width: 1286px;
}
.search-input {
margin-bottom: 2%;
-}
-
-.search-button {
- height: 10%;
+ width: 100%;
}
</style>
--
Gitblit v1.9.3