218 lines
10 KiB
JavaScript
218 lines
10 KiB
JavaScript
|
/**
|
|||
|
|
* 家书 FamilyBook · **地址联想**（高德 AutoComplete）—— 全站一份
|
|||
|
|
*
|
|||
|
|
* 🔴 v47（用户 2026-10-13）三条：
|
|||
|
|
* ①「影院管理中，输入影院名称的时候，应该自动帮我补齐所在的地方和详细地址。」
|
|||
|
|
* ②「行程里面…输入出发地和到达地的时候，都需要调用高德的接口，补齐详细地址。」
|
|||
|
|
* ③「日程中，当我输入地点的时候，也应该调用高德的接口，补齐详细地址。」
|
|||
|
|
*
|
|||
|
|
* 为什么不再"每页各写一段"：
|
|||
|
|
* 原来的做法是 `trips/node_form.php` 里自己写一段内联脚本。v42 已经因此踩过一次
|
|||
|
|
* （弹框是 AJAX 片段、内联 `<script>` 不执行 ⇒ 联想失效，只好抽了个 `fbNodeForm()`）。
|
|||
|
|
* 这次要接到**三处**（影院管理页、观影新增弹框、日程表单，而日程本身也是弹框），
|
|||
|
|
* 再各写一份必然出现"某个入口忘了补"——所以抽成这一份，谁用谁调 `fbAddr()`。
|
|||
|
|
*
|
|||
|
|
* ⚠️ 与项目其它按需资源同一套规矩：
|
|||
|
|
* · 脚本**按需加载**（页面上真有 `[data-addr]` 才拉，见 layout.php 的 fb-addr meta）；
|
|||
|
|
* · SDK 的 key/安全密钥由 layout 注入（`window.FB_AMAP`），**本文件不碰配置**；
|
|||
|
|
* · **高德挂了也必须能用** —— 输入框仍是普通文本框，手敲照常保存。
|
|||
|
|
* 所以所有 AMap 的调用都在 `__AMAP_LOADED` 判断之后，一条都不在外面。
|
|||
|
|
*
|
|||
|
|
* ⚠️ 幂等：同一段表单可能被反复塞进 DOM（弹框开关），用 `data-addr-bound` 挡住重复绑定。
|
|||
|
|
* **但"绑定"要分两层**：input 的事件只绑一次；每次调用都要**重画一次**已有值
|
|||
|
|
* （因为重画后 DOM 是新的、可能带着服务端回填的地址）。
|
|||
|
|
*/
|
|||
|
|
(function () {
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
// 高德 SDK 的就绪状态由 layout 注入的那段脚本维护（见 fb-addr 注入块）
|
|||
|
|
function sdkReady() {
|
|||
|
|
return !!(window.__AMAP_LOADED && typeof window.AMap !== 'undefined'
|
|||
|
|
&& window.AMap.AutoComplete);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 把 location（AMap.LngLat 或 {lng,lat} 或字符串）统一成 {lng,lat} */
|
|||
|
|
function readLngLat(loc) {
|
|||
|
|
if (!loc) { return { lng: '', lat: '' }; }
|
|||
|
|
if (typeof loc === 'string') {
|
|||
|
|
var p = loc.split(',');
|
|||
|
|
return p.length >= 2 ? { lng: p[0].trim(), lat: p[1].trim() } : { lng: '', lat: '' };
|
|||
|
|
}
|
|||
|
|
var lng = (loc.lng !== undefined) ? loc.lng : (loc.getLng ? loc.getLng() : '');
|
|||
|
|
var lat = (loc.lat !== undefined) ? loc.lat : (loc.getLat ? loc.getLat() : '');
|
|||
|
|
return { lng: lng === null || lng === undefined ? '' : lng,
|
|||
|
|
lat: lat === null || lat === undefined ? '' : lat };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 取"所在地方"。
|
|||
|
|
*
|
|||
|
|
* ⚠️ 高德的返回有**两套字段**，要看运气：
|
|||
|
|
* · `poi.addressComponent.{province,city,district}` —— 结构化三级；
|
|||
|
|
* · `poi.pname / cityname / adname` —— 老式平铺字段。
|
|||
|
|
* 实测两者不是同时都有。取到哪级用哪级，取不到就留空（**绝不瞎编**）。
|
|||
|
|
* @returns {string} 形如 "青岛市 市南区" / "青岛" / ''（都没有）
|
|||
|
|
*/
|
|||
|
|
function readPlace(poi) {
|
|||
|
|
var a = poi.addressComponent || null;
|
|||
|
|
var province = '', city = '', district = '';
|
|||
|
|
if (a) {
|
|||
|
|
// ⚠️ 直辖市的 province 与 city 会**同时**是"北京市"，拼起来变"北京市 北京市"
|
|||
|
|
// ⇒ 相同时只留一份。
|
|||
|
|
province = String(a.province || '').trim();
|
|||
|
|
city = String(a.city || '').trim();
|
|||
|
|
district = String(a.district || '').trim();
|
|||
|
|
}
|
|||
|
|
if (!province && !city && !district) {
|
|||
|
|
province = String(poi.pname || '').trim();
|
|||
|
|
city = String(poi.cityname || '').trim();
|
|||
|
|
district = String(poi.adname || '').trim();
|
|||
|
|
}
|
|||
|
|
var parts = [];
|
|||
|
|
if (province) { parts.push(province); }
|
|||
|
|
if (city && city !== province) { parts.push(city); }
|
|||
|
|
if (district) { parts.push(district); }
|
|||
|
|
return parts.join(' ');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 绑定一个地址输入框。
|
|||
|
|
*
|
|||
|
|
* @param {HTMLElement} input 那个要联想的输入框（必须有 `data-addr`）
|
|||
|
|
* @param {HTMLElement} scope 可选：限定字段查找范围（弹框里的一段表单）
|
|||
|
|
*/
|
|||
|
|
function bindOne(input, scope) {
|
|||
|
|
if (!input || input.getAttribute('data-addr-bound') === '1') { return; }
|
|||
|
|
input.setAttribute('data-addr-bound', '1');
|
|||
|
|
|
|||
|
|
// 字段查找范围：`data-addr-for` 给的是一个选择器。
|
|||
|
|
// 🔴 必须优先取**最近的那个**祖先（`closest`），不能 `querySelector` 取第一个 ——
|
|||
|
|
// 行程表单里 from / to 两组字段都在页面上，取第一个会把出发地的地址
|
|||
|
|
// 写到到达地上（"填错了但看起来像填对了"，最难查）。
|
|||
|
|
// 取不到祖先时才退回：先按选择器全局取第一个，最后退回 scope/document。
|
|||
|
|
var root = null;
|
|||
|
|
var forSel = input.getAttribute('data-addr-for');
|
|||
|
|
if (forSel) {
|
|||
|
|
try { root = input.closest(forSel); } catch (e) { root = null; }
|
|||
|
|
if (!root) { root = (scope || document).querySelector(forSel); }
|
|||
|
|
}
|
|||
|
|
if (!root) {
|
|||
|
|
root = (scope || document);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fieldFor(target) {
|
|||
|
|
if (!target) { return null; }
|
|||
|
|
// 🔴 同一个"逻辑字段"在项目里有两套命名，必须都认（v47 实测踩到）：
|
|||
|
|
// · 影院页 —— 全拼：`address` / `place`
|
|||
|
|
// · 行程地点 —— 缩写：`from_addr` / `to_addr`（`_addr`，不是 `_address`）
|
|||
|
|
// 只认全拼的话 `[name$="address"]` 匹配不到 `from_addr`
|
|||
|
|
// （`from_addr` 以 `_addr` 结尾）⇒ 地址永远填不进去，
|
|||
|
|
// 而"名字和经纬度都填上了"会让人误以为整个回填是好的。
|
|||
|
|
var SYN = {
|
|||
|
|
address: ['address', 'addr'],
|
|||
|
|
addr: ['addr', 'address'],
|
|||
|
|
place: ['place', 'city'],
|
|||
|
|
city: ['city', 'place'],
|
|||
|
|
lng: ['lng'],
|
|||
|
|
lat: ['lat'],
|
|||
|
|
};
|
|||
|
|
var names = SYN[target] || [target];
|
|||
|
|
for (var k = 0; k < names.length; k++) {
|
|||
|
|
var nm = names[k];
|
|||
|
|
// ① 精确名
|
|||
|
|
var el = root.querySelector('[name="' + nm + '"]');
|
|||
|
|
if (el) { return el; }
|
|||
|
|
// ② 带前缀的（`from_addr`）—— 后缀匹配
|
|||
|
|
// ⚠️ 能安全用后缀，是因为 `root` 已经收窄到**这一组**字段的容器
|
|||
|
|
// （`data-addr-for=".loc-field"` + `closest`）：
|
|||
|
|
// 出发/到达两组字段在各自的 .loc-field 里，互不可见。
|
|||
|
|
// 若在整页范围做后缀匹配，`from_addr` 与 `to_addr` 会互相抢。
|
|||
|
|
try {
|
|||
|
|
var cands = root.querySelectorAll('[name$="' + nm + '"]');
|
|||
|
|
if (cands.length) { return cands[0]; }
|
|||
|
|
cands = root.querySelectorAll('[name$="_' + nm + '"]');
|
|||
|
|
if (cands.length) { return cands[0]; }
|
|||
|
|
} catch (e) { /* 极老浏览器不支持 $= ⇒ 找不到就不填，不报错 */ }
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var targets = (input.getAttribute('data-addr-fill') || '')
|
|||
|
|
.split(',').map(function (s) { return s.trim(); })
|
|||
|
|
.filter(Boolean);
|
|||
|
|
|
|||
|
|
// 手敲也要能被"补齐"（用户可能不用联想直接打字，或 SDK 没加载）
|
|||
|
|
// —— 这里只在**选了候选**时填，避免把用户手写的地址覆盖掉。
|
|||
|
|
|
|||
|
|
if (!sdkReady()) { return; } // 降级：没有联想，输入与保存都正常
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
var ac = new window.AMap.AutoComplete({ input: input });
|
|||
|
|
ac.on('select', function (e) {
|
|||
|
|
var poi = (e && e.poi) ? e.poi : null;
|
|||
|
|
if (!poi) { return; }
|
|||
|
|
|
|||
|
|
// 输入框里放**名字**（用户认的是名字，不是"一串门牌号"）
|
|||
|
|
var name = String(poi.name || '').trim();
|
|||
|
|
if (name !== '') { input.value = name; }
|
|||
|
|
|
|||
|
|
targets.forEach(function (t) {
|
|||
|
|
var el = fieldFor(t);
|
|||
|
|
if (!el) { return; }
|
|||
|
|
// 🔴 只填**空白**的字段。理由（用户 2026-10-13 要的是"自动补齐"）：
|
|||
|
|
// 用户可能已经在地址栏手写了更细的门牌（"3 号楼 2 单元"），
|
|||
|
|
// 高德给的 `address` 只是"到路口/到楼"的粒度 —— 直接覆盖会把他写的东西抹掉，
|
|||
|
|
// 而"抹掉用户输入"是不可逆的（他点保存后就真没了）。
|
|||
|
|
// ⇒ 空着才补；已经有内容就尊重用户的。
|
|||
|
|
if (String(el.value || '').trim() !== '') { return; }
|
|||
|
|
if (t === 'place' || t === 'city') {
|
|||
|
|
var pl = readPlace(poi);
|
|||
|
|
if (pl !== '') { el.value = pl; }
|
|||
|
|
} else if (t === 'address' || t === 'addr') {
|
|||
|
|
var ad = String(poi.address || '').trim();
|
|||
|
|
if (ad !== '') { el.value = ad; }
|
|||
|
|
} else if (t === 'lng' || t === 'lat') {
|
|||
|
|
var ll = readLngLat(poi.location);
|
|||
|
|
var v = (t === 'lng') ? ll.lng : ll.lat;
|
|||
|
|
if (v !== '') { el.value = v; }
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 让调用方知道"值被程序改过"（有些页面要跟着重画/联动）
|
|||
|
|
try {
|
|||
|
|
input.dispatchEvent(new CustomEvent('fb-addr-picked', {
|
|||
|
|
bubbles: true,
|
|||
|
|
detail: { name: name, place: readPlace(poi), address: String(poi.address || '') }
|
|||
|
|
}));
|
|||
|
|
} catch (err) { /* 老浏览器没有 CustomEvent 构造器，忽略即可 */ }
|
|||
|
|
});
|
|||
|
|
} catch (err) {
|
|||
|
|
/* SDK 已加载但初始化失败（key 没绑域名等）—— 静默降级，不打扰用户 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化（**可重复调用**）。
|
|||
|
|
* @param {HTMLElement|Document} scope 限定范围；缺省 = 整页
|
|||
|
|
*/
|
|||
|
|
function fbAddr(scope) {
|
|||
|
|
var root = scope || document;
|
|||
|
|
var inputs = Array.prototype.slice.call(root.querySelectorAll('[data-addr]'));
|
|||
|
|
inputs.forEach(function (el) { bindOne(el, root); });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.fbAddr = fbAddr;
|
|||
|
|
|
|||
|
|
// 首屏跑一次。⚠️ 脚本是 defer 加载的，此时 DOM 已解析完（在 </body> 前引入亦可）。
|
|||
|
|
fbAddr(document);
|
|||
|
|
|
|||
|
|
/* 通知"我上线了"。
|
|||
|
|
⚠️ 为什么需要：调用方（行程/影院/日程的弹框）可能在**本脚本加载之前**
|
|||
|
|
就把 `fbLoadAddr()` 调过了 —— 那种情况下它的 `window.fbAddr` 判断会落空。
|
|||
|
|
它们监听这个事件补一次（见 trips/node_form.php 的 initNodeForm）。 */
|
|||
|
|
try {
|
|||
|
|
window.dispatchEvent(new Event('fb-addr-ready'));
|
|||
|
|
} catch (e) {
|
|||
|
|
/* 老浏览器没有 Event 构造器（极少）—— 调用方还有 fbAddr 兜底，不影响功能 */
|
|||
|
|
}
|
|||
|
|
})();
|