Files
FamilyBook/templates/trips/_loc_field.php
T

85 lines
4.5 KiB
PHP
Raw Normal View History

<?php
/**
* 地址输入(高德联想 + 详细地址 + 坐标),v24 第 17 批 用户第 3 条。
*
* 用户原话:「出发地和到达地,都用**高德地图的接口**,记录详细地址,
* 这个功能,triplog 也有,如果之前有数据,里面记录了行程的详细地址,
* 也都把数据迁移过来。」
*
* 界面照 TripLog 的 nodes/form.php:
* 一个可见的文本框(人能看到、能改、能自己敲)+ 四个隐藏字段
* (name / address / lng / lat —— 选中联想项后由 JS 填上)。
* **有坐标时**旁边出一个「🧭 导航到这里」链接(高德 URI API)。
*
* ⚠️ 三个必须做对的细节:
* ① **没配 key 也要能用**:SDK 不加载时文本框就是普通输入框,
* 用户手敲地名照样能存(只是没有详细地址与坐标)。
* 降级路径不能是"功能消失",只能是"辅助变少"。
* ② **assoc 用 map 而不是 select**:TripLog 用 AMap.AutoComplete 直接挂到 input 上,
* 能边打边出候选,比"点一下弹搜索框"顺手得多。
* ③ **不要 `<label for>`**:这个片段在一个页面里会出现两次(出发地/到达地),
* for/id 对不上就会互相抢焦点。用包裹式 label。
*
* 用法(require 前设好):
* $locPrefix 前缀('from' | 'to'),决定所有 id 与字段名
* $locLabel 标签文字(「出发地」「到达地」)
* $locIcon 标签前的小图标(可选)
* $locPlaceholder 占位提示
* $locRow 行数据(可选;编辑时回填):name/address/lng/lat 四个键
*/
declare(strict_types=1);
$locPrefix = (string)($locPrefix ?? 'from');
$locLabel = (string)($locLabel ?? '地点');
$locIcon = (string)($locIcon ?? '');
$locPlaceholder = (string)($locPlaceholder ?? '输入地址,如「青岛北站」');
$locRow = is_array($locRow ?? null) ? $locRow : [];
$locName = (string)($locRow['name'] ?? '');
$locAddr = (string)($locRow['address'] ?? '');
$locLng = (string)($locRow['lng'] ?? '');
$locLat = (string)($locRow['lat'] ?? '');
// 导航链接:有坐标走 navigation,没坐标退化成"按名字搜"
$locNav = \App\Geo::navUrl($locLng, $locLat, $locName);
$locId = 'loc-' . $locPrefix;
?>
<div class="loc-field" data-loc="<?= e($locPrefix) ?>">
<label class="loc-label" for="<?= e($locId) ?>-input">
<?php if ($locIcon !== ''): ?><span class="loc-ico"><?= e($locIcon) ?></span><?php endif; ?>
<?= e($locLabel) ?>
</label>
<input class="input loc-input" type="text"
id="<?= e($locId) ?>-input"
name="<?= e($locPrefix) ?>_place"
value="<?= e($locName) ?>"
placeholder="<?= e($locPlaceholder) ?>"
autocomplete="off"
<?php /* 🔴 v47(用户 2026-10-13):地址联想改用**全站共用模块**
(`assets/js/addr_suggest.js`,由 layout.php 按需拉起高德 SDK)。
`data-addr-fill` 列出选中候选后要回填哪几个字段。
⚠️ 字段查找范围限定在**本 .loc-field 内**:一个行程表单里有
from / to 两组,不限定会把出发地的地址写到到达地上。 */ ?>
data-addr data-addr-fill="address,lng,lat,city" data-addr-for=".loc-field"
data-loc-input>
<?php /* 高德没加载 / 用户自己敲的地名:这四个字段就是兜底存放处 */ ?>
<input type="hidden" name="<?= e($locPrefix) ?>_addr" value="<?= e($locAddr) ?>">
<input type="hidden" name="<?= e($locPrefix) ?>_lng" value="<?= e($locLng) ?>">
<input type="hidden" name="<?= e($locPrefix) ?>_lat" value="<?= e($locLat) ?>">
<?php /* 城市由前端选中时带回(高德 addressComponent 直接给城市名),
带不回就由服务端 App\Geo 解析 —— 两条路都通 */ ?>
<input type="hidden" name="<?= e($locPrefix) ?>_city" value="<?= e((string)($locRow['city'] ?? '')) ?>">
<div class="loc-extra">
<span class="loc-detail" data-loc-detail><?= e($locAddr !== '' && $locAddr !== $locName ? $locAddr : '') ?></span>
<a class="loc-nav" data-loc-nav
href="<?= e($locNav !== '' ? $locNav : '#') ?>"
target="_blank" rel="noopener"
<?= $locNav === '' ? 'hidden' : '' ?>>🧭 导航到这里</a>
</div>
</div>
<?php
// 只 unset 本片段自己的变量,宿主模板一个都不碰(与 _datetime.php 同一约定)
unset($locPrefix, $locLabel, $locIcon, $locPlaceholder, $locRow,
$locName, $locAddr, $locLng, $locLat, $locNav, $locId);