利用elementUI中的带有建议列表功能的输入框和高德地图中的输入提示与POI搜索服务实现在已选择行政区域内限制搜索地址(项目中实用性高!!!)

先看效果图:

图一:
first

图二:
second

图三:
three

图四:
在这里插入图片描述

解释:

  • 这里实现的功能是先选择一个行政区域,然后在该区域下去搜索地址(一开始地址搜索框默认禁止的,强制必须选择区域后才能搜索,删除已选的行政区域后,地址输入框又变回禁用状态,即只能搜索该区域下的地址。当然了,这里可以根据自己需求进行修改)。
  • 我这里行政区域只需要选到市级即可(即两级联动),如果需要选到区级,可以改成三级联动选择即可,看个人需求。
  • 行政区域的实现使用了一个npm功能包【element-china-area-data】,简单方便,可自定义选择显示效果(依赖包npm详情地址:element-china-area-data)。
  • 地址输入框使用了elementUI中输入框功能中的【带输入建议】,【自定义模板】,【远程搜索】这三个,搜索数据是使用高德地图中的输入提示插件【AMap.AutoComplete】,综合结合这些东西选择需要用到的实现的上图效果。
  • 最后就是在项目中使用前需要准备的,安装依赖包:npm install element-china-area-data -Snpm i @amap/amap-jsapi-loader --save 注册高德开发者账号,在头像下拉框里选择【应用管理】,创建新的应用,生成新的key,在项目中要能正常使用高德插件,必须有key,到这里,该准备的基本准备完了。

核心代码:

导入:

//使用官网提供的 JSAPI Loader 进行加载
//需要安装依赖:npm i @amap/amap-jsapi-loader --save
import AMapLoader from "@amap/amap-jsapi-loader";	
import { provinceAndCityData, CodeToText } from "element-china-area-data";

部分核心数据data:

areaOptions: provinceAndCityData,
map: null,
storeForm:{
	...
	area:[],	//北京市-市辖区 => area:["110000","110100"]
	address:"",
	...
}

html代码:

<el-form-item label="行政区域" prop="area" style="width:260px;">
  <el-cascader
    :options="areaOptions"
    v-model="storeForm.area"
    @change="handleChange"
    clearable
  ></el-cascader>
</el-form-item>
<el-form-item label="地址" prop="address" style="width: 552px;">
  <el-autocomplete
    :disabled="isChose"
    popper-class="my-autocomplete"
    placeholder="请输入详细地址"
    v-model="storeForm.address"
    :fetch-suggestions="querySearchAsync"
    :trigger-on-focus="false"
    @select="handleSelect"
  >
    <template slot-scope="{ item }">
      <div class="name">{{ item.value }}</div>
      <span
        class="addr"
      >{{ item.district }}{{ item.address.length>0?item.address:'' }}</span>
    </template>
  </el-autocomplete>
</el-form-item>

js代码:

mounted() {
  this.map = AMapLoader.load({
    key: "放你高德上刚才创建新的应用生成的key", // 申请好的Web端开发者Key,首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
    plugins: ["AMap.AutoComplete"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
  });
},

querySearchAsync(val, cb) {
  this.map
    .then((AMap) => {
      // 实例化AutoComplete
      let options = {
        citylimit: true, // 强制在限定城市内搜索
        city: this.storeForm.area[1], // 限制城市
      };
      let autoComplete = new AMap.AutoComplete(options);
      // 根据关键字进行搜索
      autoComplete.search(val, function (status, result) {
        // 搜索成功时,result即是对应的匹配数据
        let resAddress = [];
        if (status == "complete") {
          resAddress = result.tips;
        }
        // 将要选择后显示的值字段名设置为value,其他字段名会选择后不回显名称
        for (const item of resAddress) {
          item.value = item.name;
        }
        cb(resAddress);
      });
    })
    .catch((e) => {
      console.log(e);
    });
},

部分主要核心css代码:

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}

尾语:

  • 如果细节上或某个地方不太懂也可以问我哦~基本上核心东西都讲了。
  • 如果自己需求可能与这稍微有点不一样,不要紧,可以根据自己的需求进行稍加修改即可,如果实在不知道怎么改,可以在评论区讲出来,大家一起帮你解决~
  • 最后,最重要的一点就是,如果觉得这篇文章对自己有帮助,欢迎点击收藏,点赞呦!
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值