frontend-bug(map-picker): 地图选点 citylimit 锁死搜索范围,阿尔山等异地搜不到
这个提交包含在:
父节点
ebd55c02de
当前提交
f123422ecc
@ -0,0 +1,113 @@
|
|||||||
|
---
|
||||||
|
date: 2026-05-12
|
||||||
|
type: frontend-bug
|
||||||
|
module: admin-map-picker
|
||||||
|
priority: high
|
||||||
|
notify: ["@mmg"]
|
||||||
|
status: pending
|
||||||
|
---
|
||||||
|
|
||||||
|
# 地图选点搜不到「阿尔山白狼峰景区」等异地地名 — citylimit 锁死了搜索范围
|
||||||
|
|
||||||
|
## 现象
|
||||||
|
|
||||||
|
管理后台资源管理(景区/酒店/活动/餐厅/服务)的「地图选点」弹框,搜索框输入 `阿尔山白狼峰景区` 没任何结果;但手机端高德地图 App 能正常搜到(白狼镇 203 省道,距海拉尔 244 公里)。
|
||||||
|
|
||||||
|
复现路径:资源管理 → 任一资源新建/编辑 → 点地图图标 → 搜索框输 `阿尔山白狼峰景区` → 下拉列表空,回车后 toast 提示「在呼伦贝尔未找到相关地点」。
|
||||||
|
|
||||||
|
## 根因(纯前端,后端无关)
|
||||||
|
|
||||||
|
文件:`hl-ui/src/components/MapPicker.vue`
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 第 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 + 去掉二次过滤
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 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`,让用户区分:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<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/scenic`、`resource/restaurant`、`resource/playservice`、`resource/hotel`、`resource/extra-service` 的 EditModal
|
||||||
|
|
||||||
|
## 后端无需任何改动
|
||||||
|
|
||||||
|
地图选点是纯前端组件(高德 JS SDK 直连高德服务器),后端不参与。这条 changelog 只为通知前端修。
|
||||||
|
|
||||||
|
@mmg 看下 `hl-ui/src/components/MapPicker.vue` 改掉 citylimit 即可,优先 P1 — 影响所有资源录入跨地市的能力。
|
||||||
正在加载...
x
在新工单中引用
屏蔽一个用户