移动端

lixuliang

2024-05-08 f5233339920a59103d53e8efadc6f3f5d0b64f31

 src/components/leftMenu/sousuo2.vue

@@ -1,54 +1,77 @@
<template>
  <div id="sousuo" class="sousuo">
    <!-- 搜索框 -->
    <div class="ssk" v-show="ssk.show">
      <span @click="ssjmxs" style="float: left; height: 100%; width: 80%; overflow: hidden"><i class="el-icon-search"
          style="padding: 0px 15px 0px 20px"></i>{{ syssval }}</span>
      <span v-show="syssval !== '请输入关键词搜索地图'" @click="clearval" style="float: right; height: 100%; width: 20%"><i
          class="el-icon-circle-close"></i></span>
      <span v-show="syssval !== '请输入关键词搜索地图'" style="
    <div class="ssk" v-if="ssk.show">
      <span
        @click="ssjmxs"
        style="float: left; height: 100%; width: 80%; overflow: hidden"
        ><i
          class="el-icon-search"
          style="padding: 0px 15px 0px 20px; font-size: 0.15rem"
        ></i
        >{{ syssval }}</span
      >
      <span
        v-show="syssval !== '请输入关键词搜索地图'"
        @click="clearval"
        style="float: right; height: 100%; width: 20%"
        ><i class="el-icon-circle-close"></i
      ></span>
      <span
        v-show="syssval !== '请输入关键词搜索地图'"
        style="
          float: right;
          height: 100%;
          width: 10%;
          position: absolute;
          top: -1px;
          right: -3px;
        ">
        <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="AddFavorite" />
        "
      >
        <!-- <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="AddFavorite" /> -->
      </span>
      <span v-show="syssval == '请输入关键词搜索地图'" style="float: right; height: 100%; width: 10%">
      <!-- <span v-show="syssval == '请输入关键词搜索地图'" style="float: right; height: 100%; width: 10%">
        <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="showAddFavorite" />
      </span>
      </span> -->
    </div>
    <!-- 搜索界面 -->
    <div class="ssjm" v-show="ssjm">
      <!-- 搜索界面顶部 -->
      <div class="menutop">
        <div class="menutitle">搜索</div>
        <div class="menuback" @click="cancless">关闭</div>
      </div>
    <div class="ssjm" v-if="ssjm">
      <!-- 搜索框 -->
      <div style="margin: 0.1rem 0">
        <el-input placeholder="输入关键字搜索地图" autofocus v-model="poi_text" @input="changeInput" clearable>
      <div class="search-container">
        <div class="back" @click="cancless"></div>
        <el-input
          placeholder="输入关键字搜索地图"
          autofocus
          v-model="poi_text"
          @input="changeInput"
          clearable
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          <el-button slot="append" @click="search">搜索</el-button>
        </el-input>
      </div>
      <!-- 结果显示 -->
      <div v-if="total != 0">
        <div class="ssjg" v-show="ssjgxs">
          <div class="everyinfo" v-for="(item, index) in poiList" :key="index" @click="flyTo(item)">
            <div style="margin: 0.05rem 0">
              <i class="el-icon-map-location"></i>{{ item.name }}
          <div
            class="everyinfo"
            v-for="(item, index) in poiList"
            :key="index"
            @click="flyTo(item)"
          >
            <div class="poiName" style="margin: 0.05rem 0">
              <img src="@/assets/img/navigation/location.png" alt="" />
              <span>{{ item.name }}</span>
            </div>
            <div style="font-size: 0.12rem; color: black">
              <!-- <span>地址:{{ item.address ? item.address : "暂无详细地址" }}</span><br />
              <span>电话:{{ item.telphone ? item.telphone : "暂无联系方式" }}</span> -->
              <!-- <span>区域:{{ item.area ? item.area : "暂无区域信息" }}</span> -->
              <!-- <br /> -->
              <span>地址:{{ item.address ? item.address : "暂无详细地址" }}</span>
            <div class="addressBox">
              <span>{{ item.address ? item.address : "暂无详细地址" }}</span>
            </div>
          </div>
        </div>
@@ -60,25 +83,19 @@
  </div>
</template>
<style scoped>
/* 搜索按钮的样式 */
.iszd {
  position: absolute;
  left: 0.2rem;
  top: 0.3rem;
}

/* 搜索框的样式 */
.ssk {
  position: absolute;
  /* text-align: center; */
  left: 2.5%;
  bottom: 0.2rem;
  top: 0.15rem;
  width: 95%;
  border: 1px solid white;
  height: 0.4rem;
  line-height: 0.4rem;
  background: #fff;
  border-radius: 0.2rem;
  border-radius: 0.14rem;
  color: black;
  font-size: 0.14rem;
}
@@ -91,38 +108,109 @@
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f3f3f3;
  z-index: 99;
  z-index: 1099;
}
.search-container {
  /* background-color: #fff; */
  background-color: #fff;
  display: flex;
  height: 52px;
  align-items: center;
}
.back {
  background: url("~@/assets/img/search/back.png") center center no-repeat;
  background-size: 10px 17px;
  height: 40px;
  width: 50px;
}

.el-input {
  width: 85%;
  background-color: #eee;
  border-radius: 13px;
}
.el-input /deep/ .el-input-group__append,
.el-input /deep/ .el-input-group__prepend {
  background-color: transparent;
  border: none;
}

.el-input /deep/ .el-input__inner {
  border: none;
  font-weight: 500;
  font-size: 0.14rem;
  color: #3e3d3d;
}
.el-select {
  width: 80px;
  width: 0.8rem;
  position: relative;
  font-size: 0.14rem;
}

.el-select:after {
  content: "";
  position: absolute;
  right: 0;
  height: 24px;
  border-left: 1px solid #dcdcdc;
  top: 50%;
  transform: translateY(-50%);
}
.el-input /deep/ .el-input-group__append {
  width: 50px;
  padding-right: 25px;
}
.el-input /deep/ .el-input-group__append .el-button {
  font-size: 0.14rem;
  color: #ffffff;
  background: #2477ff;
  border-radius: 13px;
  padding: 10px;
}

.el-scrollbar .hover {
  background: none;
}


/* 每条搜索结果 */
.everyinfo {
  color: #409eff;
  padding: 0.05rem;
  font-size: 0.16rem;
  border-bottom: 1px solid lightgray;
}

/* 
  搜索结果 
*/
.ssjg {
  overflow-x: hidden;
  overflow-y: scroll;
  /* max-height: 4rem; */
  max-height: 80vh;
  max-height: calc(98vh - 50px);
  background: white;
  padding: 0.2rem;
  border-radius: 0.05rem;
}

.ssjg .everyinfo {
  color: #409eff;
  padding: 0.05rem;
  font-size: 0.16rem;
  border-bottom: 1px solid lightgray;
}
.ssjg .poiName {
  display: flex;
  align-items: center;
  height: 20px;
}
.ssjg .poiName img {
  width: 20px;
}
.ssjg .poiName span {
  margin-left: 7px;
  line-height: 20px;
}
.ssjg .addressBox {
  margin-left: 27px;
  margin-top: 5px;
  color: #000;
  font-weight: 500;
  font-size: 13px;
}
.ssjg::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
@@ -153,7 +241,7 @@
import axios from "axios";
import store from "@/utils/store2.js";
import common from "@/components/common";
import { createPointMarker, flyToPoint } from '@/utils/map2.js'
import { createPointMarker, flyToPoint } from "@/utils/map2.js";
window.flyPoint = null;
window.flyLine = null;
let Allresults = [];
@@ -195,6 +283,12 @@
      window.flyLine = undefined;
      this.poi_text = "";
      this.ssjgxs = false;
      if (window.pointArr && window.pointArr.length > 0) {
        window.pointArr.forEach((item) => {
          window.mapapi.removeLayer(item);
        });
        window.pointArr = [];
      }
    },
    changeInput() {
      if (this.poi_text === "") {
@@ -218,10 +312,10 @@
    cancless() {
      this.ssjm = false;
      if (window.pointArr && window.pointArr.length > 0) {
        window.pointArr.forEach(item => {
          window.map.removeLayer(item)
        })
        window.pointArr = []
        window.pointArr.forEach((item) => {
          window.mapapi.removeLayer(item);
        });
        window.pointArr = [];
      }
    },
    getArea() {
@@ -251,7 +345,7 @@
      rectangle.maxy > 31.182515322 && (rectangle.maxy = 31.182515322);
      return `RECT(${rectangle.minx} ${rectangle.miny},${rectangle.maxx} ${rectangle.maxy})`;
    },
    getPoi() {
    getGdPoi() {
      axios
        .get(common.poiserve, {
          params: {
@@ -264,19 +358,17 @@
          },
        })
        .then((res) => {
          // 高德
          console.log("poiserve");
          if (res.data.status == "1") {
            res.data.pois &&
              res.data.pois
                // .filter((item) => {
                //   var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                //   return (
                //     item.pname.includes("北京") &&
                //     item.name.includes(this.poi_text) &&
                //     !reg.test(item.typecode)
                //   );
                // })
                .filter((item) => {
                  var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                  return (
                    item.pname.includes("北京") &&
                    item.name.includes(this.poi_text) &&
                    !reg.test(item.typecode)
                  );
                })
                .forEach((val) => {
                  let poiarr = val.location.split(",");
                  let poi = {
@@ -297,6 +389,49 @@
                    pname: val.province,
                    type: val.type,
                    typecode: val.typecode,
                  };
                  Allresults.push(obj);
                });
          }
          this.total = Allresults.length;
          this.poiList = Allresults;
          this.showList = true;
        });
    },
    getBdPoi() {
      axios
        .get(common.poiserve, {
          params: {
            request: "bdPoi",
            query: this.poi_text,
            output: "json",
            coord: "cgcs2000",
            page_num: 1,
            page_size: 30,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.status == 0) {
            res.data.results &&
              res.data.results
                .filter((item) => {
                  var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                  return (
                    item.city.includes("北京") &&
                    item.name.includes(this.poi_text)
                  );
                })
                .forEach((val) => {
                  let obj = {
                    address: val.address,
                    adname: val.area,
                    cityname: val.city,
                    id: val.uid,
                    lat: parseFloat(val.location.lat),
                    lng: parseFloat(val.location.lng),
                    name: val.name,
                    pname: val.province,
                  };
                  Allresults.push(obj);
                });
@@ -356,7 +491,7 @@
        this.poiList = [];
        switch (this.select) {
          case "全部":
            this.getPoi();
            this.getBdPoi();
            this.getData();
            // axios
            //   .all([
@@ -482,7 +617,7 @@
            //   );
            break;
          case "POI":
            this.getPoi();
            this.getBdPoi();
            break;
          case "地块":
            this.getData();
@@ -498,27 +633,10 @@
      this.ssjm = false;
      this.syssval = item.name;
      //飞行定位
      flyToPoint([item.lng, item.lat])
      flyToPoint([item.lng, item.lat]);
      //创建点位
      let layer = createPointMarker([item.lng, item.lat], item);
      window.map.addLayer(layer)

















      window.mapapi.addLayer(layer);

      // let that = this;
      // let degrees = item.location.split(',');
@@ -550,7 +668,7 @@
      //   axios
      //     .get(
      //       window.gisBaseUrl +
      //       "yzxncsApi/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
      //       "BEApi/cs/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
      //       degrees[0] +
      //       "&lat=" +
      //       degrees[1] +