基于vue2+element实现省市搜索面板（模仿高德地图搜索面板）

兮刈_lz

已于 2022-05-10 14:01:20 修改

阅读量921

点赞数 2

分类专栏： vue.js js gis 文章标签： elementui vue.js javascript

于 2022-05-10 13:54:59 首次发布

本文链接：https://blog.youkuaiyun.com/qq_64803883/article/details/124686388

版权

本文展示了如何使用Vue.js实现一个城市搜索组件，包括输入框、下拉菜单、字母导航和城市列表。组件支持按省份和城市分类，以及手动搜索功能，数据来源于高德地图API。同时，它具有字母锚点滚动、热门城市展示和点击选择城市等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果：

相关代码：areaSearch.vue

<template>
  <div class="area-search">
    <div class="city-chose" ref="cityChose">
      <el-input
        readonly
        v-model="curCity"
        @click.native.stop="iptClick"
        class="cur-ipt"
      >
        <span slot="suffix" class="el-icon-arrow-down ipt-fate-suffix"></span>
      </el-input>
      <div class="cityChose-panel" v-show="panelShow">
        <div class="cityChose-panel-top">
          当前城市：{
  { curCity }}
          <em
            class="fd-fr el-icon-close panel-close"
            @click="panelShow = false"
          ></em>
        </div>
        <div class="hotCity-div clearfix">
          <div
            class="fd-fl hotCity-item"
            v-for="item in hotCity"
            :key="item.name_en"
            @click="cityClick(item)"
          >
            {
  { item.name }}
          </div>
        </div>
        <div
          class="panel-tackle clearfix"
          style="margin: 5px 0; padding-right: 10px"
        >
          <div class="panel-toggle clearfix fd-fl">
            <div
              :class="[
                'fd-fl',
                'panel-toggle-item',
                { 'active-item': activeItem === 1 },
              ]"
              @click="toggleClick(1)"
            >
              按省份
            </div>
            <div
              :class="[
                'fd-fl',
                'panel-toggle-item',
                { 'active-item': activeItem === 2 },
              ]"
              @click="toggleClick(2)"
            >

最低0.47元/天解锁文章