VUE--全国区域选择---根据输入的地址自动获取区域信息

最新推荐文章于 2024-08-13 08:51:18 发布
最新推荐文章于 2024-08-13 08:51:18 发布
阅读量459 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53634043/article/details/134336483
版权

HTML部分

<div class="box">
    <div
      class="item-input"
      :style="{color:disable?'#c6cad2':'#000'}"
      @click="showList"
    >{{searchStr ?searchStr:'请选择省市区'}}<i
        @click="clear"
        class="el-icon-circle-close"
      ></i></div>
    <div
      class="city-picker-area"
      v-if="done"
    >
      <div class="city-picker-inner">
        <div class="tabs">
          <ul class="tab-inner">
            <li
              :class="['tab-item', 0 == searchList.length ?'active':'']"
              @click.stop="clickSearch('100000',-1)"
            > 全国</li>
            <li
              :class="['tab-item', index == searchList.length -1?'active':'']"
              v-for="(item, index) in searchList"
              :key="item.adcode + index"
              @click.stop="clickSearch(item.adcode,index)"
            > {{ item.name }}</li>
          </ul>
        </div>
        <div class="cards">
          <ul class="card-inner">
            <li
              class="card-item"
              v-for="(item, index) in allCity"
              :key="item.adcode + index"
              @click.stop="clickCity(item)"
            >
              <span :class="['card-name', lastName == item.name?'active':'']">{{item.name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

CSS

.item-input {
  position: relative;
  width: 100%;
  background: #f4f5f7;
  border-radius: 4px;
  transition: all 0.1s linear;
  border: none;
  height: 36px;
  line-height: 36px;
  padding-left: 15px;
  color: var(--ft-black);
  font-size: 14px;
  .el-icon-circle-close {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 16px;
  }
  &:hover {
    .el-icon-circle-close {
      display: inline-block;
    }
  }
}
ul,
li {
  list-style: none;
}

.box {
  position: relative;
}
.city-picker-area {
  position: absolute;
  width: 100%;
  padding: 0 12px 12px;
  background-color: #fff;
  z-index: 999;
  margin-top: -4px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba($color: #000000, $alpha: 0.06);
}
.tab-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 36px;
  font-size: 12px;
  margin-bottom: 2px;
  margin-top: 16px;
  border-bottom: 1px solid #ebedee;
  padding-left: 0;
  .tab-item {
    flex: 0 0 20%;
    margin-right: 2px;
    height: 100%;
    text-align: center;
    line-height: 36px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: -3px;
    font-size: 14px;
    font-weight: 400;
    color: #8e8e8e;
    text-align: left;
    cursor: pointer;
    &:hover {
      color: #ff3a3a;
    }
  }
  .active {
    color: #ff3a3a;
  }
}
.cards {
  padding: 0 10px;
  max-height: 200px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
  .card-inner {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    .card-item {
      flex: 0 0 25%;
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;
      overflow: hidden;
      .card-name {
        display: inline-block;
        width: 100%;
        padding: 0 10px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #333;
        cursor: pointer;
        &:hover {
          color: #ff3a3a;
        }
      }
      .active {
        color: #ff3a3a;
      }
    }
  }
}

JS(VUE)  -- 地区组件

props: {
    value: Array,
    //是否可选择任意节点
    checkStrictly: {
      type: Boolean,
      default: false
    },
    //最多查询层级 3可到街道
    levelLimit: {
      type: Number,
      default: 3
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    searchStr () {
      let str = ""
      this.searchList.forEach((item, index) => {
        if (index != 0) {
          str = str + " / " + item.name
        } else {
          str += item.name
        }
      });
      return str
    },
    lastName () {
      if (this.searchList.length != 0) {
        return this.searchList[this.searchList.length - 1].name
      }
      return "全国"
    }
  },
  watch: {
    searchStr: {
      handler (val) {
        this.$emit("updateTextArea", this.searchStr);
      }
    },
  },
  mounted () {
    this.getAreaData("100000", false);
    document.addEventListener('click', this.hideMenu);
  },
  data () {
    return {
      allCity: [],
      searchList: [],
      done: false,
      currentAreaList: [],   // 当前查询到的省份编码
    }
  },
  beforeDestroy () {
    document.removeEventListener('click', this.hideMenu);
  },
  methods: {
    hideMenu (e) {
      e.stopPropagation();
      if (e.target.className == "item-input" || e.target.className == "card-name" || e.target.className == "tab-item") {
        return
      } else {
        this.done = false;
      }
    },
    showList () {
      if (!this.disable) {
        this.done = true;
      }
    },
    initValue (val) {
      this.searchList = [];
      this.allCity = [];
      if (this.value && this.value.length != 0) {
        if (!this.checkStrictly) {
          if (this.value.length == 4) {
            let index = this.value.length - 2;
            let name = this.value[index + 1];
            for (let i = 0; i <= index; i++) {
              let cityCode = this.value[i]
              this.getAreaDataByCode(cityCode).then(res => {
                this.$set(this.searchList, i, res.data.districts[0]);
                res.data.districts[0].districts.forEach((item) => {
                  if (item.name == name) {
                    this.$set(this.searchList, i + 1, item);
                    this.allCity = res.data.districts[0].districts;
                  }
                })
              })
            }
          } else {
            let index = this.value.length - 1;
            for (let i = 0; i <= index; i++) {
              let cityCode = this.value[i]
              if (cityCode) {
                this.getAreaDataByCode(cityCode).then(res => {
                  this.$set(this.searchList, i, res.data.districts[0]);
                  if (i == index) {
                    this.allCity = res.data.districts[0].districts;
                  }
                })
              }
            }
          }
        } else {
          if (this.value.length == 4) {
            let index = this.value.length - 2;
            let name = this.value[index + 1];
            for (let i = 0; i <= index; i++) {
              let cityCode = this.value[i]
              if (cityCode) {
                this.getAreaDataByCode(cityCode).then(res => {
                  this.$set(this.searchList, i, res.data.districts[0]);
                  res.data.districts[0].districts.forEach((item) => {
                    if (item.name == name) {
                      this.$set(this.searchList, i + 1, item);
                      this.allCity = res.data.districts[0].districts;
                    }
                  })
                })
              }
            }
          } else {
            let index = this.value.length - 1;
            for (let i = 0; i <= index; i++) {
              let cityCode = this.value[i]
              if (cityCode) {
                this.getAreaDataByCode(cityCode).then(res => {
                  this.$set(this.searchList, i, res.data.districts[0]);
                  if (i == index) {
                    this.allCity = res.data.districts[0].districts;
                  }
                })
              }
            }
          }
        }
      } else {
        this.getAreaData("100000", false);
      }
    },
    showSearch () {
      this.done = !this.done;
    },
    clear () {
      if (!this.disable) {
        this.currentAreaList = [];
        this.done = false;
        this.searchList = [];
        this.getAreaData("100000", false);
        this.$emit("updateCityList", this.currentAreaList);
        // 更新fulltext
        this.$emit("updateTextArea", this.searchStr);
        this.$emit("input", this.currentAreaList)
      }
    },
    clickCity (data) {
      if (data.level == "province") {
        this.$set(this.searchList, "0", data);
      } else if (data.level == "city") {
        this.$set(this.searchList, "1", data);
      } else if (data.level == "district") {
        this.$set(this.searchList, "2", data);
      } else {
        if (this.searchList.length == 2) {
          // 长度为2
          if (this.searchList[this.searchList.length - 1].level == "street") {
            this.$set(this.searchList, this.searchList.length - 1, data);
          } else {
            this.$set(this.searchList, "2", data);
          }
        } else {
          if (this.searchList[this.searchList.length - 1].level == "street") {
            this.$set(this.searchList, this.searchList.length - 1, data);
          } else {
            this.$set(this.searchList, "3", data);
          }
        }
        this.done = false;
        if (!this.checkStrictly) {
          this.currentAreaList = []
          this.searchList.forEach((item) => {
            if (item.level != "street") {
              this.currentAreaList.push(item.adcode)
            } else {
              this.currentAreaList.push(item.name)
            }
          })
          this.$emit("updateCityList", this.currentAreaList);
          this.$emit("input", this.currentAreaList)
        }
      }
      if (data.level != "street") {
        this.getAreaData(data.adcode, false);
      }
      if (this.checkStrictly) {
        this.currentAreaList = []
        this.searchList.forEach((item) => {
          if (item.level != "street") {
            this.currentAreaList.push(item.adcode)
          } else {
            this.currentAreaList.push(item.name)
          }
        })
        this.$emit("updateCityList", this.currentAreaList);
        this.$emit("input", this.currentAreaList)
      }
    },
    clickSearch (adcode, index) {
      this.getAreaData(adcode);
      if (index == -1) {
        this.searchList = [];
        this.currentAreaList = []
        this.$emit("updateCityList", this.currentAreaList);
        this.$emit("input", this.currentAreaList)
      } else {
        this.searchList = this.searchList.slice(0, index + 1);
        this.currentAreaList = []
        this.searchList.forEach((item) => {
          if (item.level != "street") {
            this.currentAreaList.push(item.adcode)
          } else {
            this.currentAreaList.push(item.name)
          }
        })
        this.$emit("updateCityList", this.currentAreaList);
        this.$emit("input", this.currentAreaList)
      }
    },
    getAreaDataByCode (code) {
      return axios
        // get地址替换为自己项目的高德地图 district地址
        .get("/amap/v3/config/district", {
          params: {
            keywords: code,
            subdistrict: 1,
            key: "高德地图key",
          },
        })
    },
    getAreaData (code, isLeaf) {
      this.getAreaDataByCode(code).then(res => {
        this.allCity = res.data.districts[0].districts;
      })
    },
  }

js--- 根据输入内容自动查找所在地区

search (location, data) {
     axios.get("/wsqq/ws/geocoder/v1/", { // 根据经纬度获取街道
        params: {
          key: "腾讯地图key",
          location: location
        }
      }).then((res) => {
        let street = res.data.result.address_reference.town.title;
        let areaCode = res.data.result.ad_info.adcode;
        let cityCode = res.data.result.ad_info.adcode.substr(0, 4) + "00";
        let provinceCode = res.data.result.ad_info.adcode.substr(0, 2) + "0000";
        this.$set(this.form, "areaCode", areaCode);
        this.$set(this.form, "cityCode", cityCode);
        this.$set(this.form, "provinceCode", provinceCode);
        this.$set(this.form, "streetCode", street);
        this.$set(this.form, "areaList", [provinceCode, cityCode, areaCode, street])
        this.$nextTick(() => {
            // 上部分介绍到的vue组件  调用器initValue方法进行查找
          this.$refs.areaTree.initValue();
          this.$refs.form.clearValidate("areaList")
        })
        this.isSearch = false;
      }).catch(err => {
        this.isSearch = false;
      })
    },
    // 根据监听输入地址的变化进行查询
    inputAddress () {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        if (this.form.detailedAddress != "") {
          this.isSearch = true;
          axios
             // 替换为自己项目的腾讯地图api
            .get("/wsqq/ws/geocoder/v1/", {
              params: {
                address: this.form.detailedAddress,
                key: "腾讯地址key",
                get_poi: 1
              },
            })
            .then((res) => {
              if (res.data.result) {
                let location = res.data.result.location;
                this.form.lon = location.lng + "";
                this.form.lat = location.lat + "";
                this.form.lonlat = location.lng + "," + location.lat;
                this.search(location.lat + "," + location.lng, res.data.result)
              } else {
                this.$message.error('请确认地址是否输入正确')
                this.isSearch = false;
              }
            });
        } else {
          this.form.lon = "";
          this.form.lat = "";
          this.form.lonlat = "";
        }
      }, 500);
    },

// 监听器部分
  watch: {
    "form.detailedAddress": {
      handler (val) {
        if (val) {
          this.inputAddress();
        }
      },
      immediate: true
    }
  },

qq_53634043
关注
vue项目中使用百度地图(vue-baidu-map)
ZJW222的博客
08-06 7788
在使用vue做项目的时候，有用到百度地图，使用了vue-baidu-map插件，包括拾取位置坐标，搜索位置等 1.引入方式 可在app.js中全局引入 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { /* 需要注册百度地图开发者来获取你的ak */ ak: 'YOUR_APP_KEY' }) 也可以局部引入，组...
vue-cli中使用百度地图（根据输入框输入的内容，获取详细地址）
坤音女孩的博客
11-07 6385
效果图如下： 1.申请百度地图密钥（ak）-- http://lbsyun.baidu.com/index.php?title=jspopular （1）百度地图开放平台–开发文档–web开发–JavaScript API–服务介绍–产品简介–申请密钥（ak） （2）查看应用–创建应用–应用名称、应用类型（vue中使用百度地图需要选择浏览器端，因为浏览器端的启用服务包括Javascript...
Vue编写多地区选择组件
12-09
看看效果图： 效果图 功能点: 支持不限城市,不限地区(这个东西的实现..真心死磕了挺久) – 左右两边数据的同步 地区一次性多选,若是选择了所有地区会自动转为不限地区 数据迁移箭头的判断..选中数据才会有对应的按钮可以点击 已选位置的数据同步响应调用的地方,当然也可以外部传入…(新增传出,编辑依赖传入再组合) 箭头是iconfont,支持外部传入,默认是我这边的cdn的啦…. !!!这是一个独立的组件,css预处理是用的scss; 写的过程遇到的问题: 因为这个功能会多次需要切换省份城市这些,所以我一次性拉取所有数据存储到localstorage,不然请求接口次数太多了
vue 地址区域选择组件
热门推荐
强哥叨逼叨
08-28 1万+
项目中用到了地址区域选择，自己写了一个，效果如下： 组件代码： &lt;template&gt; &lt;div&gt; &lt;i-input @on-focus="areaFocus" @on-blur="areaBlur" placeholder="请选择地址" v-model="formObj[formPropNa.
Vue 区域选择器 - `vue-region-picker` 使用指南
gitblog_00759的博客
08-13 392
Vue 区域选择器 - vue-region-picker 使用指南 vue-region-picker[DEPRECATED]项目地址:https://gitcode.com/gh_mirrors/vu/vue-region-picker 项目介绍 vue-region-picker 是一个基于 Vue.js 的区域选择器组件，它专为选择中国行政区划而设计。此组件轻量且灵活，便于集成到任何 V...
vue地区选择组件
weixin_33712881的博客
04-29 1621
AddressMap a vue.js component 概述 主要用于全国地区数据的操作，包括省，市，区三级联动，地区数据的添加和删除； 在操作地区数据时，以前也用过树形的地区选择组件，但因其在再操作大量的地区数据时，渲染缓慢，所以我们就换了另一种数据展示形式和交互形式，从而就有了这个组件。 注意：该组件是vue.js组件 demo 抢鲜体验请点击这里demo API Props ...
vue 选择省市县
Tttrycatch的博客
08-18 1068
proviceList: pcaa['86'], // 获取所有的省。
Vue中如何进行表单地区选择与级联联动
程序员徐师兄的博客
07-26 718
在Vue中实现表单地区选择和级联联动是一个常见的需求。用户经常需要填写地区信息，而一个简单的选择框往往无法满足复杂的地区数据结构。下面将介绍如何使用Vue实现表单地区选择和级联联动。
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
10-18
本文将介绍如何利用vue-auto-focus这个自定义指令来控制输入框和文本区域的自动聚焦行为，以便于处理表单中的自动聚焦需求。 首先，vue-auto-focus是一个专门用于Vue的自定义指令，通过它可以方便地控制Vue实例中...
语法高亮插件vue-syntax-highlight
09-05
一旦Package Control安装完成，可以通过快捷键`Ctrl+Shift+P`（Windows/Linux）或`Cmd+Shift+P`（Mac）打开命令面板，然后输入`Package Control: Install Package`，在弹出的列表中找到并选择`Vue Syntax Highlight`...
vue2autocomplete一个Vue2的文本输入自动完成组件
08-10
Vue2Autocomplete是针对Vue 2框架设计的一个高效、可定制化的文本输入自动完成组件。这个组件主要用于提高用户在输入时的效率，通过提供实时的建议列表，帮助用户快速找到并选择所需的内容。Vue.js是一个轻量级但...
vue地区选择组件教程详解
11-26
概述 主要用于全国地区数据的操作，包括省，市，区三级联动，地区数据的添加和删除； 在操作地区数据时，以前也用过树形的地区选择组件，但因其在再操作大量的地区数据时，渲染缓慢，所以我们就换了另一种数据展示形式和交互形式，从而就有了这个组件。 注意：该组件是 vue.js 组件 demo 抢鲜体验请点击这里 demo API Props 参数 类型 说明 area Array 传入组件的地区的数据 Events 事件名 参数 说明 selected area 组件中选中的地区 详细说明 Props area area 参数是必选项，表示组件初始化时的地区数据，
vue省市区/县数据js文件（citydata.js）
07-10
可以通过该文件获取全国省市区/县的json数据信息，适合用于vue级联选择器获取数据使用。
vue的区号/国籍选择组件
11-10
自己用vue手写的一个区号/国籍选择组件，有需要的可以根据内容自己修改
省份选择,地区选择,区域选择
05-22
大家可以参考一下.全国的感觉应该够用了.
推荐使用：Vue Region Picker —— 轻松选取中国区域信息的组件
gitblog_00068的博客
06-10 582
推荐使用：Vue Region Picker —— 轻松选取中国区域信息的组件 vue-region-picker[DEPRECATED]项目地址:https://gitcode.com/gh_mirrors/vu/vue-region-picker 1、项目介绍 Vue Region Picker 是一个基于 Vue.js 的组件，旨在帮助你在应用中轻松实现对中国省、市、区的选择功能。无论是 ...
vue element ui使用选择器实现地区选择
记笔记
07-18 7053
vue element ui使用选择器实现地区选择的两种方法。使用普通选择器组件和使用练级选择器动态加载实现，解决动态加载回显异常的问题
探秘简洁而强大的 Vue 地区选择器——v-region
gitblog_00047的博客
05-16 755
探秘简洁而强大的 Vue 地区选择器——v-region v-region提供 5 种应用形式的 4 级行政区划选择器 A simple region cascade selector, provide 4 levels Chinese administrative division data项目地址:https://gitcode.com/gh_mirrors/vr/v-region 当你在开...
VUE实现 类似收获地址自动识别 并且关联到对应的省市区
weixin_42232639的博客
01-14 2689
前段时间做需求， 要求做一个京东淘宝那样客户粘贴地址之后，自动识别省县区三级的地址，本来可以在后端进行做的，但是呢（主要是存在地址省县区不能为空，且详细地址也不能为空的校验），为了减少不必要的调度，就决定全部放在前端做了，并且做起来也挺不错的。话不多说直接上代码。主要分几个模块。 因为本人是后端开发人员，所以前端代码写的有些拉胯，各位大佬拿回去之后可以去进行优化一下，相信问题不大。
vue-quill-editor输入内容的时候，点击输入框任意都能聚焦到内容要怎么设置参数。
最新发布
09-20
在你的Vue组件中，初始化`vue-quill-editor`时，可以加入一个`focus`属性，并将其值设为`true`或者`'input'`，表示当点击元素时应该自动聚焦到输入区域。例如： ```html <quill-editor :focus="true" @ready=...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值