格式异常问题解决

zhongrj

2025-01-21 c393f8b721c1e7f6ea65ff0f3ad3a47dce71cfbc

 src/components/map/searchMap.vue

@@ -2,26 +2,26 @@
  <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>-->
        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>

@@ -29,27 +29,28 @@
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,
      searchList: [],
      loading: false,
    }
  },
  watch:{
    longitude:{
      handler(newVal){
        if (newVal){
  watch: {
    longitude: {
      handler(newVal) {
        if (newVal) {
          this.getAddressByLonLat()
        }
      }
@@ -58,13 +59,17 @@
  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){
    remoteMethod(data) {
      this.queryString = data
      this.getAddressByQuery()
    },
@@ -72,13 +77,12 @@
      let ak = this.ak
      let region = this.region
      let query = this.queryString
      let ids = "61743e28bbf11700e9fc4ef03dd8bea9"
      searchByQuery(ak,region,query,ids).then(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
@@ -86,17 +90,36 @@
      let page_size = "1"
      let page_num = "1"
      let infos = 1
      let radius = 500
      let location = this.longitude+" "+this.latitude
      searchByLonLat(ak,query,region,region_type,page_size,page_num,infos,radius,location).then(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]
        this.queryString = data.address
        this.$emit("getAddress",this.queryString)
        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){
    selectChange(data) {
      let selectData = JSON.parse(data)
      this.$refs.OpenLayersMap.setView(selectData.location)

      this.$emit("getLonLat", [selectData.location.lng, selectData.location.lat])
      this.$emit("getAddress", selectData.address)

      this.$refs.dcSearchMap.setView(selectData.location)
    }
  }
}