From 4f3b3c4d2fcc27c59095e6ddded35a572000e8ee Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Tue, 14 Feb 2023 14:46:05 +0800
Subject: [PATCH] 安保管理地图选点地址回显
---
src/views/security/security.vue | 6 ++
src/components/map/searchMap.vue | 49 +++++++++++++++++++-----
src/components/map/searchMapBox.vue | 10 +++++
3 files changed, 53 insertions(+), 12 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>
diff --git a/src/components/map/searchMapBox.vue b/src/components/map/searchMapBox.vue
index 85db7ef..34b580a 100644
--- a/src/components/map/searchMapBox.vue
+++ b/src/components/map/searchMapBox.vue
@@ -337,6 +337,16 @@
if (routeRange.startsWith("POINT")) {
this.addPoint(routeRange)
}
+ },
+
+ setView(point){
+ let view = this.map.getView()
+ let center = [point.lng,point.lat]
+ view.setZoom(20)
+ view.animate({
+ center: center,
+ duration: 5,
+ })
}
},
mounted() {
diff --git a/src/views/security/security.vue b/src/views/security/security.vue
index 839d6a8..c33c9f3 100644
--- a/src/views/security/security.vue
+++ b/src/views/security/security.vue
@@ -38,7 +38,7 @@
append-to-body
destroy-on-close
width="70%">
- <search-map @getLonLat="getLonLat" :point-lon-lat="point"></search-map>
+ <search-map @getLonLat="getLonLat" @getAddress="getAddress" :point-lon-lat="point"></search-map>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmLonLat">确 定</el-button>
</span>
@@ -468,9 +468,13 @@
this.chosePoint.longitude = data[0]
this.chosePoint.latitude = data[1]
},
+ getAddress(data){
+ this.chosePoint.address = data
+ },
confirmLonLat(){
this.form.longitude = this.chosePoint.longitude
this.form.latitude = this.chosePoint.latitude
+ this.form.place = this.chosePoint.address
this.point = "POINT("+this.form.longitude +" "+this.form.latitude+")"
this.placeBox = false
}
--
Gitblit v1.9.3