From c393f8b721c1e7f6ea65ff0f3ad3a47dce71cfbc Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Tue, 21 Jan 2025 10:20:34 +0800
Subject: [PATCH] 格式异常问题解决
---
src/components/map/searchMap.vue | 106 +++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 78 insertions(+), 28 deletions(-)
diff --git a/src/components/map/searchMap.vue b/src/components/map/searchMap.vue
index dd391d3..14e55d0 100644
--- a/src/components/map/searchMap.vue
+++ b/src/components/map/searchMap.vue
@@ -1,36 +1,56 @@
<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>
+ <!-- <search-map-box ref="OpenLayersMap" @getMapData="getMapData" :route-range="point" :is-detail="true"></search-map-box>-->
+ <dc-search-map ref="dcSearchMap" @getMapData="getMapData" :point="point"></dc-search-map>
</div>
</template>
<script>
import SearchMapBox from "@/components/map/searchMapBox";
import {getAoiByPt, search, searchByLonLat, searchByQuery} from "@/api/security/security";
+import data from "@/views/util/data";
+import DcSearchMap from "@/components/map/dcSearchMap";
export default {
name: "searchMap",
- components: {SearchMapBox},
+ components: {DcSearchMap, SearchMapBox},
props: ['pointLonLat'],
data() {
return {
- ak:"ebf48ecaa1fd436fa3d40c4600aa051f",
- region:"361100",
+ ak: "ebf48ecaa1fd436fa3d40c4600aa051f",
+ region: "361100",
longitude: "",
latitude: "",
queryString: "",
point: "",
+ searchList: [],
+ loading: false,
}
},
- watch:{
- longitude:{
- handler(newVal){
- if (newVal){
+ watch: {
+ longitude: {
+ handler(newVal) {
+ if (newVal) {
this.getAddressByLonLat()
}
}
@@ -39,35 +59,67 @@
created() {
this.point = this.pointLonLat
},
+ mounted() {
+ this.$refs.dcSearchMap.init()
+ },
methods: {
getMapData(data) {
- this.longitude = data[0][0]
- this.latitude = data[0][1]
- this.$emit("getLonLat", data[0])
+ this.longitude = data[0]
+ this.latitude = data[1]
+ this.$emit("getLonLat", data)
+
+ },
+ 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)
+ searchByQuery(ak, region, query).then(res => {
+ let dataList = res.data.result
+ this.searchList = dataList
})
},
- getAddressByLonLat(){
+ getAddressByLonLat() {
let ak = this.ak
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 location = this.longitude+" "+this.latitude
-
- searchByLonLat(ak,query,region,region_type,page_size,page_num,infos,radius,location).then(res=>{
- console.log(res)
+ let radius = 100
+ let location = this.longitude + " " + this.latitude
+ searchByLonLat(ak, query, region, region_type, page_size, page_num, infos, radius, location).then(res => {
+ let data = res.data.result[0]
+ if(data!=undefined){
+ this.queryString = data.address
+ this.$emit("getAddress", this.queryString)
+ let point = [data.location.lng,data.location.lat]
+ this.$emit("getLonLat", point)
+ //清空
+ this.searchList = []
+ //触发搜索
+ this.getAddressByQuery()
+ }else{
+ this.queryString = [];
+ //清空
+ this.searchList = []
+ this.$emit("getAddress", '')
+ this.$emit("getLonLat", ['',''])
+ }
+
})
+ },
+ selectChange(data) {
+ let selectData = JSON.parse(data)
+
+ this.$emit("getLonLat", [selectData.location.lng, selectData.location.lat])
+ this.$emit("getAddress", selectData.address)
+
+ this.$refs.dcSearchMap.setView(selectData.location)
}
}
}
@@ -76,14 +128,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