更新记录

1.0（2026-07-11）

2026-07-11 V1.0.0 初始版本

平台兼容性

chooseLocationYdh

仿 uni.chooseLocation 的地图选点组件，支持 高德 (amap) / 百度 (baidu) / 腾讯 (qqmap) 三种地图服务商，不依赖 uniCloud，前端直调 HTTP API。

目录结构

chooseLocationYdh/
├── chooseLocationYdh.vue   # 组件源码
├── README.md               # 使用说明（本文件）
└── CHANGELOG.md            # 更新日志

安装

组件符合 uni-app easycom 规范，将 chooseLocationYdh 目录放入项目的 components/ 下即可使用，无需 import 和注册。

项目根目录/
└── components/
    └── chooseLocationYdh/
        ├── chooseLocationYdh.vue
        ├── README.md
        └── CHANGELOG.md

快速上手

<template>
  <view>
    <button @click="showPicker = true">选择地址</button>

    <chooseLocationYdh
      :show="showPicker"
      provider="amap"
      :mapKeys="{ amap: '你的高德Web服务Key' }"
      @select=""
      @cancel="showPicker = false"
    />
  </view>
</template>

<script>
export default {
  data() {
    return { showPicker: false }
  },
  methods: {
    (res) {
      console.log('选点结果：', res)
      // res = { name, address, latitude, longitude, location, province, city, district }
      this.showPicker = false
    }
  }
}
</script>

Props

mapKeys 格式

{
  amap:  '6b0900956a679ee896f4863eb621afd9',   // 高德 Web 服务 Key（已内置，可覆盖）
  baidu: '你的百度地图 API Key',                  // 百度地图 AK
  qqmap: '你的腾讯地图 API Key'                   // 腾讯地图 Key
}

注意：高德地图已内置一个可用 Key，百度/腾讯需要自行申请并传入。

Events

select 返回数据

{
  "name": "天安门",
  "address": "北京市东城区东长安街",
  "latitude": 39.908823,
  "longitude": 116.39747,
  "location": "39.908823,116.39747",
  "province": "北京市",
  "city": "北京市",
  "district": "东城区"
}

地图服务商说明

使用百度地图

<chooseLocationYdh
  :show="showPicker"
  provider="baidu"
  :mapKeys="{ baidu: 'your_baidu_ak' }"
  @select=""
  @cancel="showPicker = false"
/>

使用腾讯地图

<chooseLocationYdh
  :show="showPicker"
  provider="qqmap"
  :mapKeys="{ qqmap: 'your_qqmap_key' }"
  @select=""
  @cancel="showPicker = false"
/>

UI 交互说明

1. 进入页面 → 自动定位 → 显示附近 POI 列表
2. 拖动地图 → 地图中心定位针跟随 → 自动刷新附近 POI
3. 点击 POI 列表项 → 高亮选中（蓝色圆点 + ✓ 标记）
4. 点击"确认选点" → 回调 @select，返回选中位置
5. 未选择时确认 → 默认返回地图中心点
6. 点击搜索栏 → 进入搜索模式
7. 搜索地点 → 输入关键词 → 确认搜索 → 点击结果可快速定位

平台兼容

常见问题

Q: 百度/腾讯 Key 在哪里申请？

• 百度地图：https://lbsyun.baidu.com/ → 控制台 → 创建应用（选择 浏览器端）
• 腾讯地图：https://lbs.qq.com/ → 控制台 → 创建 Key

Q: 选点后省市区信息为空？

如果返回结果中 province / city / district 为空，组件会自动调用项目已有的 api.getLngLatAddrDetail 接口进行反地理编码补全。

Q: 如何修改界面样式？

组件使用 scoped CSS，所有 class 以 cl-ydh- 为前缀。可以在父页面通过深度选择器覆盖：

::v-deep .cl-ydh-btn-primary {
  background: #ffd100 !important;
}

版本

当前版本：1.0.0
更新日志见 CHANGELOG.md