<template>
|
<div class="basic-container">
|
<div class="search-line">
|
<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>-->
|
<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: {DcSearchMap, SearchMapBox},
|
props: ['pointLonLat'],
|
data() {
|
return {
|
ak: "ebf48ecaa1fd436fa3d40c4600aa051f",
|
region: "361100",
|
longitude: "",
|
latitude: "",
|
queryString: "",
|
point: "",
|
searchList: [],
|
loading: false,
|
}
|
},
|
watch: {
|
longitude: {
|
handler(newVal) {
|
if (newVal) {
|
this.getAddressByLonLat()
|
}
|
}
|
}
|
},
|
created() {
|
this.point = this.pointLonLat
|
},
|
mounted() {
|
this.$refs.dcSearchMap.init()
|
},
|
methods: {
|
getMapData(data) {
|
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
|
searchByQuery(ak, region, query).then(res => {
|
let dataList = res.data.result
|
this.searchList = dataList
|
})
|
},
|
getAddressByLonLat() {
|
let ak = this.ak
|
let query = ""
|
let region = this.region
|
let region_type = "circle"
|
let page_size = "1"
|
let page_num = "1"
|
let infos = 1
|
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)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.search-line {
|
display: flex;
|
width: 1286px;
|
}
|
|
.search-input {
|
margin-bottom: 2%;
|
width: 100%;
|
}
|
|
</style>
|
