当前位置：首页 > VUE

vue实现城市

2026-01-08 02:37:13VUE

Vue 实现城市选择功能

使用 Element UI 的 Cascader 组件

Element UI 提供了一个 Cascader 级联选择器组件，非常适合实现城市选择功能。需要先安装 Element UI 并导入 Cascader 组件。

<template>
  <el-cascader
    v-model="selectedCities"
    :options="cityOptions"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedCities: [],
      cityOptions: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'haidian',
              label: '海淀区'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

使用第三方城市数据

可以使用现成的城市数据包，如 china-location 或 province-city-china。安装后直接导入数据使用。

vue实现城市

npm install province-city-china

import { province, city, area } from 'province-city-china'

export default {
  data() {
    return {
      provinces: province,
      cities: city,
      areas: area
    }
  }
}

自定义城市选择组件

可以创建自定义的城市选择组件，通过三级联动实现省市区选择。

vue实现城市

<template>
  <div>
    <select v-model="selectedProvince" @change="loadCities">
      <option v-for="province in provinces" :value="province.code">{{ province.name }}</option>
    </select>

    <select v-model="selectedCity" @change="loadAreas">
      <option v-for="city in cities" :value="city.code">{{ city.name }}</option>
    </select>

    <select v-model="selectedArea">
      <option v-for="area in areas" :value="area.code">{{ area.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedArea: '',
      provinces: [],
      cities: [],
      areas: []
    }
  },
  methods: {
    loadCities() {
      // 根据省份加载城市
    },
    loadAreas() {
      // 根据城市加载区县
    }
  }
}
</script>

使用高德地图 API

高德地图提供了城市选择 API，可以实现更丰富的地图选择功能。

<template>
  <div id="container"></div>
</template>

<script>
export default {
  mounted() {
    AMap.plugin('AMap.DistrictSearch', () => {
      const districtSearch = new AMap.DistrictSearch({
        extensions: 'all',
        subdistrict: 1
      })

      districtSearch.search('中国', (status, result) => {
        console.log(result.districtList[0].districtList)
      })
    })
  }
}
</script>

实现搜索功能

为城市选择器添加搜索功能，提升用户体验。

<template>
  <el-autocomplete
    v-model="searchText"
    :fetch-suggestions="querySearch"
    placeholder="请输入城市名称"
    @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      cities: []
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = this.cities.filter(city => 
        city.name.includes(queryString)
      )
      cb(results)
    },
    handleSelect(item) {
      console.log(item)
    }
  }
}
</script>