YXGJ/select/place/index.vue

<template>
  <view>
    <map
      id="Mymap"
      class="Mymap"
      :longitude="choose.longitude"
      :latitude="choose.latitude"
      show-location
      scale="16"
      :markers="markers"
    />
    <view class="search-box">
      <picker
        v-if="area.show"
        :value="area.name"
        mode="region"
        @change="regionChange"
        level='city'
      >
        <view class="picker">
          <view class="name">
            {{ area.name[1] }}
          </view>
          <view class="iconfont icon-a-wodetiaozhuan" />
        </view>
      </picker>
      <view style="flex: 1; margin-left: 10px">
        <My_search @onSearch="onSearch" isInput />
      </view>
    </view>
    <My_listbox boxBackground="#fff" bottomHeight="70" :pullDown="false">
      <view v-if="list.length == 0" style="padding-top: 6vw">
        <u-empty mode="search" />
      </view>
      <view
        class="item"
        @click="changeChoose(item)"
        :style="{
          background: choose.lonlat == item.lonlat ? '#F8FBFF' : '#fff',
        }"
        v-for="item in list"
        :key="item.lonlat"
        hover-class="navigator-hover"
      >
        <view class="name">
          {{ item.name }}
        </view>
        <view class="address">
          {{ getCity(item) }}
        </view>
      </view>
    </My_listbox>
    <view class="footer">
      <view
        class="confirm"
        :class="choose.name ? '' : 'forbidden'"
        @click="choose.name ? submit() : ''"
        hover-class="navigator-hover"
      >
        确定
      </view>
    </view>
  </view>
</template>

<script>
import { tianditu } from "../../utils/tianditu.js";
const api = new tianditu();

export default {
  data() {
    return {
      keyWord: "",
      choose: {
        longitude: "",
        latitude: "",
      },
      area: {
        show: false,
      },
      markers: [],
      list: [],
      circumjacents: [],
    };
  },
  onLoad(options) {
    this.getLocation(true).then((location) => {
      this.choose = location;
      api.getPlace(location.longitude, location.latitude).then((place) => {
        console.log("逆解析", place);
        if (place.msg == "ok") {
          this.list = [
            {
              ...place.result.addressComponent,
              name: place.result.addressComponent.poi,
              lonlat: `${location.longitude},${location.latitude}`,
              ...location,
            },
          ];

          this.choose = this.list[0];

          this.markers = [
            {
              longitude: this.choose.longitude - 0,
              latitude: this.choose.latitude - 0,
              width: "35",
              height: "50",
            },
          ];

          this.area = {
            show: true,
            name: [
              place.result.addressComponent.province,
              place.result.addressComponent.city,
              place.result.addressComponent.county,
            ],
            specify: [
              place.result.addressComponent.province_code,
              place.result.addressComponent.city_code,
              place.result.addressComponent.county_code,
            ],
          };

          this.getCircumjacent(place.result);
        } else {
          uni.showModal({
            title: "提示",
            content: "获取位置失败",
            showCancel: false,
          });
        }
      });
    });
    uni.setNavigationBarTitle({
      title: options.title || "选择地点",
    });
  },
  methods: {
    getCircumjacent(place) {
      api
        .placeNameSearch({
          keyWord: place.addressComponent.road,
          queryRadius: "1000",
          pointLonlat: `${place.location.lon},${place.location.lat}`,
          queryType: 3,
          start: 0,
          count: 5,
          dataTypes:
            "公司,标志性建筑物,家装建材零售,家居用品,五金,电器零售,工业园",
          show: 2,
        })
        .then((res) => {
          console.log("地址", res);
          for (const key in res) {
            if (key != "keyWord" && res[key].pois) {
              this.list = this.unique(
                this.list.concat(
                  res[key].pois.map((v) => {
                    let lonlat = v.lonlat.split(",");
                    v.longitude = lonlat[0];
                    v.latitude = lonlat[1];
                    return v;
                  })
                ),
                "lonlat"
              );
              this.circumjacents = JSON.parse(JSON.stringify(this.list));
            }
          }
        });
    },
    regionChange({ detail }) {
      this.area = {
        show: true,
        name: detail.value,
        specify: detail.code.map((v) => "156" + v),
      };
      if (this.keyWord) this.onSearch(this.keyWord);
    },
    unique(arr, key) {
      for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i][key] == arr[j][key]) {
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    changeChoose(item) {
      this.choose = item;
      this.markers = [
        {
          longitude: item.longitude - 0,
          latitude: item.latitude - 0,
          width: "35",
          height: "50",
        },
      ];
    },
    onSearch(keyWord) {
      this.keyWord = keyWord;
      if (!keyWord) {
        this.list = this.circumjacents;
      } else {
        api
          .placeNameSearch({
            keyWord: keyWord,
            specify: this.area.specify[1],
            queryType: 12,
            start: 0,
            count: 30,
            show: 2,
          })
          .then((res) => {
            console.log("搜索地址", res);
            if (res.pois) {
              this.list = this.unique(
                res.pois.map((v) => {
                  let lonlat = v.lonlat.split(",");
                  v.longitude = lonlat[0];
                  v.latitude = lonlat[1];
                  return v;
                }),
                "lonlat"
              );
            } else {
              this.list = [];
              this.markers = [];
              this.choose = {
                longitude: "",
                latitude: "",
              };
            }
          });
      }
      if (this.list.length) {
        this.choose = this.list[0];
        this.markers = [
          {
            longitude: this.choose.longitude - 0,
            latitude: this.choose.latitude - 0,
            width: "35",
            height: "50",
          },
        ];
      }
    },
    submit() {
      this.$Http.routeSelected(this.choose);
    },
  },
};
</script>

<style lang="scss" scoped>
.Mymap {
  width: 100vw;
  height: 37vh;
}

.search-box {
  display: flex;
  align-items: center;
  width: 100vw;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;

  .picker {
    display: flex;
    flex-direction: row;
    align-items: center;

    .icon-a-wodetiaozhuan {
      transform: rotate(90deg);
      margin-left: 4px;
    }
  }
}

.item {
  width: 100vw;
  margin: 0 auto;
  // border-bottom: .5px solid #ddd;
  padding: 10px;
  box-sizing: border-box;

  .name {
    line-height: 20px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
    margin-bottom: 5px;
  }

  .address {
    line-height: 17px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-size: 12px;
    color: #999999;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 65px;
  background: #ffffff;
  box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  padding: 5px 10px;
  z-index: 2;

  .confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    background: #c30d23;
    border-radius: 5px;
    font-family: PingFang SC, PingFang SC;
    font-size: 14px;
    color: #ffffff;
  }

  .forbidden {
    opacity: 0.6;
  }
}
</style>