安保管理地图选点地址回显

guoshilong

2023-02-14 4f3b3c4d2fcc27c59095e6ddded35a572000e8ee

安保管理地图选点地址回显

 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>

 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() {

 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
    }