hl-api-changelog/changelogs/2026-05/12_frontend_bug_admin_mappicker-citylimit-blocks-cross-city-search.md
API Changelog Bot 546d22454a chore(changelog): mappicker citylimit BUG 二次反馈,优先级升 urgent
用户 2026-05-14 再次复现:某表单「结束 *」字段输入「1」候选项全锁呼伦贝尔市。
说明 MapPicker.vue citylimit:true 至今未改,且组件被复用范围超过资源管理 EditModal。
追加新场景描述与验证项,priority high → urgent,frontmatter 加 reopened_at。
2026-05-14 11:27:20 +08:00

6.1 KiB

date, reopened_at, type, module, priority, notify, status
date reopened_at type module priority notify status
2026-05-12 2026-05-14 frontend-bug admin-map-picker urgent
@mmg
pending

地图选点搜不到「阿尔山白狼峰景区」等异地地名 — citylimit 锁死了搜索范围

现象

管理后台资源管理(景区/酒店/活动/餐厅/服务)的「地图选点」弹框,搜索框输入 阿尔山白狼峰景区 没任何结果;但手机端高德地图 App 能正常搜到(白狼镇 203 省道,距海拉尔 244 公里)。

复现路径:资源管理 → 任一资源新建/编辑 → 点地图图标 → 搜索框输 阿尔山白狼峰景区 → 下拉列表空,回车后 toast 提示「在呼伦贝尔未找到相关地点」。

根因(纯前端,后端无关)

文件:hl-ui/src/components/MapPicker.vue

// 第 360-364 行 (AutoComplete - 输入自动补全)
const autoComplete = new window.AMap.AutoComplete({
  city: city,
  citylimit: true,          // ❌ 强制只搜当前城市
  datatype: 'all',
})

// 第 425-431 行 (PlaceSearch - 回车精确搜索)
const placeSearch = new window.AMap.PlaceSearch({
  pageSize: 20,
  pageIndex: 1,
  city: city,
  citylimit: true,          // ❌ 强制只搜当前城市
  extensions: 'base',
})

// 第 444-448 行 (PlaceSearch 结果二次过滤)
const cityName = city.replace(/市$/, '')
const filteredPois = pois.filter((poi) => {
  const poiCity = poi.cityname || poi.pname || ''
  return poiCity.includes(cityName) || cityName.includes(poiCity.replace(/市$/, ''))
})                          // ❌ 即使高德返回了,前端再剔一次

currentCity 在打开弹框时默认是「呼伦贝尔」(默认坐标 119.7581, 49.2112 落在海拉尔区),阿尔山白狼峰景区行政归属「兴安盟阿尔山市」,跟呼伦贝尔市平级,所以:

  1. 高德 AutoComplete/PlaceSearch 因 citylimit:true 直接返回 0 条
  2. 万一返回了也会被前端 filteredPois 二次过滤剔掉
  3. 用户得到「在呼伦贝尔未找到」的错觉,实际全国都没搜

业务背景

呼籁旅行的景点/酒店/活动资源会跨内蒙古多个盟市,甚至跨省(用户已确认场景:阿尔山在兴安盟,业务里就是要录)。硬把搜索锁在当前定位城市违反业务需求。手机端高德 App 不锁城市能搜到,后台同一份数据库却搜不到,体验割裂。

修复(前端,3 处改动)

改法 A(推荐,最小改动) — 去掉 citylimit + 去掉二次过滤

// AutoComplete
const autoComplete = new window.AMap.AutoComplete({
  // city: city,             // 删掉或保留(只作提示,不约束)
  // citylimit: true,        // ❌ 删
  datatype: 'all',
})

// PlaceSearch
const placeSearch = new window.AMap.PlaceSearch({
  pageSize: 20,
  pageIndex: 1,
  // city: city,             // 删掉或保留(只作排序加权)
  // citylimit: true,        // ❌ 删
  extensions: 'base',
})

// 删掉 filteredPois 二次过滤逻辑,直接用 pois.map(...)

city 参数即使保留也只影响结果排序(同城靠前),不会过滤异地结果 — 这是高德 SDK 默认行为。

改法 B(更友好) — 给 POI 下拉列表多显示一行省市

去掉 citylimit 后,搜索"白狼峰"可能返回多地同名结果。建议下拉项展示加一行 pname + cityname + adname,让用户区分:

<div class="poi-name">{{ poi.name }}</div>
<div class="poi-region">{{ poi.pname }}{{ poi.cityname }}{{ poi.adname }}</div>
<div class="poi-address">{{ poi.address }}</div>

改法 C(可选,UX 兜底) — 搜不到时给「扩大到全国」按钮

如果产品坚持默认锁当前城市(为了减少干扰),可在 0 结果时改 toast 为按钮「在全国搜索」,点击后重新调一遍不带 citylimit 的搜索。但不推荐,默认就该全国搜。

推荐方案

改法 A + 改法 B:去掉 citylimit + 下拉列表多显示省市行。改动量小,业务上覆盖跨地市/跨省录入,UX 上避免同名地点歧义。

验证清单(前端改完自测)

  • 「阿尔山白狼峰景区」能搜到,选中后地址回填正确
  • 「故宫」「外滩」等跨省地名能搜到(虽然业务里大概率用不到,但说明搜索域已放开)
  • 原本能搜到的本地地名(海拉尔区、呼伦贝尔学院)仍然能搜
  • 选中异地 POI 后,确认按钮回填的 province/city/district 与 POI 实际归属一致(不应仍是「呼伦贝尔市」)
  • 5 个调用方均验证:resource/scenicresource/restaurantresource/playserviceresource/hotelresource/extra-service 的 EditModal

后端无需任何改动

地图选点是纯前端组件(高德 JS SDK 直连高德服务器),后端不参与。这条 changelog 只为通知前端修。

@mmg 看下 hl-ui/src/components/MapPicker.vue 改掉 citylimit 即可,优先 P1 — 影响所有资源录入跨地市的能力。


2026-05-14 二次反馈(优先级 high → urgent)

用户今天又复现同一根因,但场景从「资源管理地图选点」扩散到了新的表单字段:某表单的「结束 *」输入框,输入 1 后下拉建议项全部局限呼伦贝尔市(109馨园 / 1mm沙龙美学(锦都会店) / 109小区 / 186彩带河 / 1+2电竞 — 五条全是「内蒙古自治区呼伦贝尔市海拉尔区/陈巴尔虎旗/牙克石市」)。说明:

  1. MapPicker.vuecitylimit:true 至今未改
  2. 该组件在更多页面被复用(不只是资源管理 EditModal),包括带「出发/结束」字段的表单(疑似订单/行程/定制需求页)
  3. 修复一处即覆盖所有调用方,不需要分别改

新增验证项(在原验证清单基础上):

  • 带「出发 / 结束」字段的表单,输入「1」/「人民」/「天安门」等通用关键字,下拉应跨城市/跨省返回(不再清一色呼伦贝尔)
  • 在「结束」字段输入「阿尔山」「故宫」「外滩」,能选中并回填正确地址
  • 全国常用关键字搜索结果数 > 5 条(原来锁城市常出现 0 条或 ≤ 3 条)

优先级理由:第二次反馈,影响面已从资源录入扩散到下单/行程相关表单,业务录入直接卡死。@mmg 麻烦尽快排期,改动量很小(删 2 个 citylimit:true + 1 段二次过滤)。