79 lines
4.0 KiB
PHP
79 lines
4.0 KiB
PHP
|
<?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"
|
|||
|
|
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);
|