UviewUltra 4.0

Appearance

CityLocate 城市定位选择 4.4.0 ​

city-locate 是一个城市定位与选择组件，集成了城市定位、热门城市展示和城市列表索引功能，适用于需要城市选择功能的场景。

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基本使用 ​

html
<template>
  <up-city-locate 
    :indexList="['热', 'A', 'B']"
    :cityList="cityData"
    @location-success="handleLocation"
    @select-city="handleSelectCity"
  />
</template>
js
<script setup>
import { ref } from 'vue';

const cityData = ref([
  // 热门城市
  [
    { name: '北京', value: 'beijing' },
    { name: '上海', value: 'shanghai' }
  ],
  // A字母城市
  [
    { name: '安庆', value: 'anqing' },
    { name: '安阳', value: 'anyang' }
  ]
]);

const handleLocation = (res) => {
  console.log('定位结果:', res);
};

const handleSelectCity = (city) => {
  console.log('选中城市:', city);
};
</script>

组件特性 ​

  • 自动定位：组件加载后自动获取用户当前位置
  • 热门城市展示：支持自定义热门城市列表
  • 字母索引：支持右侧字母导航快速定位
  • 自定义数据结构：灵活适配不同后端数据格式
  • 多平台支持：兼容uni-app所有平台

使用示例 ​

自定义数据结构 ​

html
<template>
  <up-city-locate 
    :cityList="customData"
    nameKey="cityName"
  />
</template>
js
<script setup>
import { ref } from 'vue';

const customData = ref([
  [
    { cityName: '北京', value: 'beijing' },
    { cityName: '上海', value: 'shanghai' }
  ]
]);
</script>

外部控制当前城市 ​

html
<template>
  <up-city-locate 
    :currentCity="userCity"
  />
</template>
js
<script setup>
import { ref } from 'vue';

const userCity = ref('北京');
</script>

设置定位类型 ​

html
<template>
  <up-city-locate 
    locationType="gcj02"
  />
</template>
js
<script setup>
import { ref } from 'vue';
// 组件将使用 gcj02 定位类型
</script>

监听定位结果 ​

html
<template>
  <up-city-locate 
    @location-success="handleLocationResult"
  />
</template>
js
<script setup>
const handleLocationResult = (res) => {
  console.log('定位结果:', res);
};
</script>

API ​

Props 属性 ​

属性名说明类型默认值可选值
indexList索引列表，用于右侧字母导航Array['城市']-
cityList城市数据列表，数组第一项为热门城市Array[[{name: '北京', value: 'beijing'}, ...]]-
locationType定位类型String'wgs84'gcj02 等
currentCity当前城市名称（外部传入）String''-
nameKey城市对象中用于显示名称的键名String'name'-

Events 事件 ​

事件名说明回调参数
location-success定位成功时触发{...res, locationCity: string}
select-city用户选择城市时触发{locationCity: string}

Slots 插槽 ​

插槽名说明
header组件顶部自定义内容
footer组件底部自定义内容

注意事项 ​

  1. 组件会在 mounted 生命周期自动触发定位功能
  2. 定位失败时会显示"定位失败，请点击重试"，用户可以点击重试
  3. 城市列表数据结构：
    • 第一维数组：字母分类
    • 第二维数组：该分类下的城市列表
    • 第一项（index=0）为热门城市

右侧演示页面源代码地址 ​

点击以下链接以查看右侧演示页面的源码


 github  gitee

常见问题 ​

如何获取用户选择的城市？ ​

通过监听 select-city 事件获取用户选择的城市：

js
<script setup>
const handleSelectCity = (city) => {
  console.log('用户选择的城市:', city.locationCity);
}
</script>

定位不准确怎么办？ ​

  1. 尝试更换定位类型：locationType="gcj02"
  2. 确保用户已授权定位权限
  3. 在失败回调中提供手动选择功能

如何自定义热门城市？ ​

通过 cityList 属性传入第一个数组就是热门城市列表：

js
<script setup>
import { ref } from 'vue';

const cityList = ref([[
  { name: '北京', value: 'beijing' },
  { name: '上海', value: 'shanghai' },
  { name: '广州', value: 'guangzhou' }
]]);
</script>