clxx 3.0.2 → 3.0.4

package/build/MapLocationSelection/provider.d.ts

@@ -0,0 +1,45 @@
+import type { Coord, POIItem } from "./types";
+export interface MapProviderInitOptions {
+    container: HTMLElement;
+    initialCenter?: Coord;
+    initialZoom?: number;
+    initialCity?: string;
+    primary?: string;
+}
+export interface SearchOptions {
+    page?: number;
+    pageSize: number;
+    radius: number;
+}
+export interface SearchAroundResult {
+    pois: POIItem[];
+    hasMore: boolean;
+}
+export interface ReverseGeocodeResult {
+    name: string;
+    address: string;
+    province?: string;
+    city?: string;
+    district?: string;
+    adcode?: string;
+}
+export interface GeolocateOptions {
+    allowIpFallback?: boolean;
+}
+export type MapProviderEvent = "movestart" | "moveend" | "click";
+export interface MapProvider {
+    init(opts: MapProviderInitOptions): Promise<void>;
+    initHeadless(opts?: Pick<MapProviderInitOptions, "initialCity">): Promise<void>;
+    destroy(): void;
+    getCenter(): Coord;
+    setCenter(center: Coord, zoom?: number): void;
+    upsertUserMarker(center: Coord): void;
+    searchAround(center: Coord, options: SearchOptions): Promise<SearchAroundResult>;
+    searchByKeyword(center: Coord, keyword: string, options: SearchOptions): Promise<POIItem[]>;
+    geolocate(options?: GeolocateOptions): Promise<Coord | null>;
+    reverseGeocode(center: Coord): Promise<ReverseGeocodeResult | null>;
+    on(event: "movestart", handler: () => void): void;
+    on(event: "moveend", handler: () => void): void;
+    on(event: "click", handler: (lng: number, lat: number) => void): void;
+}
+export type MapProviderType = "amap" | "bmap";

package/build/MapLocationSelection/provider.js

@@ -0,0 +1,10 @@
+"use strict";
+// MapProvider：把"具体地图 SDK"对 UI 层屏蔽掉的统一抽象。
+//
+// 设计原则：
+//   - UI 不知道地图实例的存在，只通过 provider 操作；
+//   - provider 内部坐标系自洽（amap=GCJ02、bmap=BD09），传入传出都是同一坐标系；
+//   - 事件订阅是"注册一次，永不取消"——和当前 UI 行为对齐，避免 provider 内部
+//     管理 listener 列表的复杂度；
+//   - provider 在 init 之后才允许其它方法被调用，UI 层负责保证这个顺序。
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/MapLocationSelection/style.d.ts

@@ -0,0 +1,4 @@
+import { Interpolation, Theme } from "@emotion/react";
+export type MapLocStyle = Record<string, Interpolation<Theme>>;
+export declare const DEFAULT_PRIMARY = "#2f7dff";
+export declare function createStyle(primary: string): MapLocStyle;

package/build/MapLocationSelection/style.js

@@ -0,0 +1,442 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PRIMARY = void 0;
+exports.createStyle = createStyle;
+const react_1 = require("@emotion/react");
+const color_1 = require("../utils/color");
+const theme_1 = require("../utils/theme");
+const rem_1 = require("../utils/rem");
+// 设计变量（与 CitySelect 保持一致）
+const textPrimary = "#1f2328";
+const textSecondary = "#6b7280";
+const textTertiary = "#9ca3af";
+const bgPage = "#ffffff";
+const bgSubtle = "#f5f6f8";
+const border = "#e5e7eb";
+exports.DEFAULT_PRIMARY = "#2f7dff";
+// 浮层按钮基础样式（白底 + 柔和阴影，叠加在地图上保证可读，贴近 CitySelect 的扫平质感）
+const flatBase = {
+    backgroundColor: bgPage,
+    color: textPrimary,
+    border: "none",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.06)",
+};
+function createStyle(primary) {
+    const primaryActive = (0, color_1.darken)(primary, 0.15);
+    // 抬起 / 回弹的几何换算：
+    // - pin 容器高 0.72rem，整体抬起幅度对应 pin 容器的 28%
+    // - head 高度占容器 60%，上抬 28%/60% ≈ 46.67% 自身高度
+    // - stem 高度占容器 37.5%，scaleY 起点 1，抬起后 (37.5%+28%)/37.5% ≈ 1.7467；
+    //   stem 的 transform-origin 设在底部（即针尖处），保证 scaleY 改变时针尖不动
+    // 这样「抬起」只让针头浮起、针体拉长，针尖始终钉在屏幕中心 = 地图中心，
+    // 避免出现「拖动时看见的针尖指向点」与「松手后实际选中的中心点」错位。
+    //
+    // 弹簧关键帧（pin 高度相对幅度）：抬起 +28% → -5% → +4% → -2% → +1% → 0
+    //   首次过冲从 4% 加大到 5%、衰减比按 ~1:0.8:0.5:0.2，更接近真实弹簧
+    //   时段分布前重后轻（28% / 48% / 65% / 82%），让"砸下→第一次回弹"最显著，
+    //   余下的小回弹快速收敛，配合 0.5s 总时长整体更轻快、更"脆"
+    const pinHeadDropKf = (0, react_1.keyframes)({
+        "0%": { transform: "translate(-50%, -46.67%)" },
+        "28%": { transform: "translate(-50%, 8.33%)" },
+        "48%": { transform: "translate(-50%, -6.67%)" },
+        "65%": { transform: "translate(-50%, 3.33%)" },
+        "82%": { transform: "translate(-50%, -1.67%)" },
+        "100%": { transform: "translate(-50%, 0%)" },
+    });
+    const pinStemDropKf = (0, react_1.keyframes)({
+        "0%": { transform: "translateX(-50%) scaleY(1.7467)" },
+        "28%": { transform: "translateX(-50%) scaleY(0.8667)" },
+        "48%": { transform: "translateX(-50%) scaleY(1.1067)" },
+        "65%": { transform: "translateX(-50%) scaleY(0.9467)" },
+        "82%": { transform: "translateX(-50%) scaleY(1.0267)" },
+        "100%": { transform: "translateX(-50%) scaleY(1)" },
+    });
+    // 定位中 spinner 的旋转动画
+    const spinKf = (0, react_1.keyframes)({
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+    });
+    return {
+        inner: (0, react_1.css)({
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            backgroundColor: bgPage,
+            display: "flex",
+            flexDirection: "column",
+            color: textPrimary,
+            fontFamily: theme_1.fontStack,
+            WebkitFontSmoothing: "antialiased",
+            MozOsxFontSmoothing: "grayscale",
+            userSelect: "none",
+            overflow: "hidden",
+        }),
+        // 顶部地图区域
+        mapWrap: (0, react_1.css)({
+            position: "relative",
+            flex: "0 0 55%",
+            width: "100%",
+            backgroundColor: "#e8eaef",
+            overflow: "hidden",
+        }),
+        mapContainer: (0, react_1.css)({
+            width: "100%",
+            height: "100%",
+            // 必须显式 touch-action: none，让地图 SDK 接收完整的 touch 事件链
+            // （单指拖动、双指捏合缩放、双击放大），由 SDK 内部实现这些手势。
+            //
+            // 为什么必须显式设：clxx 的 Container 在 <html> 上设了
+            // touch-action: manipulation（= pan-x pan-y pinch-zoom），意思是
+            // "单指 pan 和双指 pinch-zoom 都交给浏览器处理"。touch-action 在事件
+            // 处理时是从触发元素到 root 逐级应用 OR 限制——任何祖先设了限制，
+            // 后代就受限，导致：
+            //   * 移动端用户双指捏合地图，浏览器优先 capture 去尝试缩放整个页面
+            //     （viewport 未禁用 user-scalable 时）；
+            //   * 地图 SDK 完全收不到 pinch 事件，**双指缩放失效**——典型现象就是
+            //     "在地图上捏不动"。
+            // 子元素显式 touch-action: none 会覆盖祖先的 manipulation，把所有 touch
+            // 事件交回给元素自己处理。这是地图组件的标准做法。
+            touchAction: "none",
+        }),
+        // 居中、不动的定位 pin
+        // 针尖在 wrapper 内部 y=95.5% 处（与原 SVG viewBox 中针尖 y=977.92/1024 一致），
+        // 所以 translateY=-95.5% 才能让针尖与地图几何中心（用户当前位置 marker 中心）严格对齐
+        // 注意：抬起 / 落下动画已迁移到子元素 head / stem 上，容器位置永远固定，
+        // 这样针尖始终对准地图中心，避免「拖动时看到的针尖位置」与「松手后实际选中点」错位
+        centerPin: (0, react_1.css)({
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -95.5%)",
+            pointerEvents: "none",
+            width: (0, rem_1.r)(72),
+            height: (0, rem_1.r)(72),
+            zIndex: 5,
+        }),
+        // pin 头部圆环：原 SVG viewBox 中外径 60%、环厚约外径的 30%
+        // 以 border 模拟“甜甜圈”，中间镂空让针体在重叠区被环覆盖
+        // 加一层细投影提升悬浮感，使 pin 在地图底图上有"贴近但漂浮"的层次
+        centerPinHead: (0, react_1.css)({
+            position: "absolute",
+            top: 0,
+            left: "50%",
+            transform: "translateX(-50%)",
+            width: "60%",
+            height: "60%",
+            borderRadius: "50%",
+            border: `${(0, rem_1.r)(13)} solid ${primary}`,
+            boxSizing: "border-box",
+            boxShadow: "0 4px 10px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.08)",
+            transition: "transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)",
+            willChange: "transform",
+        }),
+        // 抬起：仅针头上移 46.67% 自身高度（= 28% pin 高度），针尖不动
+        centerPinHeadLifted: (0, react_1.css)({
+            transform: "translate(-50%, -46.67%)",
+            transition: "transform 0.16s ease-out",
+        }),
+        // 落下 + 多次回弹：与 stem 同步播放
+        centerPinHeadDrop: (0, react_1.css)({
+            animation: `${pinHeadDropKf} 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1`,
+        }),
+        // pin 针体：宽 5%、从 58% 处伸到 95.5% 处的细矩形，底部加轻微圆角对齐原 SVG 弧线
+        // 与头部保持 ~2% 重叠，源序在头部之前，确保头部在重叠区盖住针体
+        // transform-origin 设在底部（即针尖处），scaleY 改变时针尖始终钉在原位
+        centerPinStem: (0, react_1.css)({
+            position: "absolute",
+            top: "58%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            transformOrigin: "50% 100%",
+            width: "5%",
+            height: "37.5%",
+            backgroundColor: "#5D5D5D",
+            borderBottomLeftRadius: "50% 8%",
+            borderBottomRightRadius: "50% 8%",
+            transition: "transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)",
+            willChange: "transform",
+        }),
+        // 抬起：针体被纵向拉长到 1.7467 倍（= (37.5%+28%) / 37.5%），针尖端不动
+        centerPinStemLifted: (0, react_1.css)({
+            transform: "translateX(-50%) scaleY(1.7467)",
+            transition: "transform 0.16s ease-out",
+        }),
+        // 落下 + 多次回弹：与 head 同步播放
+        centerPinStemDrop: (0, react_1.css)({
+            animation: `${pinStemDropKf} 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1`,
+        }),
+        // 顶部一行：取消（左） / 确定（右）
+        topBar: (0, react_1.css)({
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            padding: `calc(env(safe-area-inset-top, 0px) + ${(0, rem_1.r)(28)}) ${(0, rem_1.r)(28)} ${(0, rem_1.r)(16)}`,
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: (0, rem_1.r)(16),
+            zIndex: 6,
+            pointerEvents: "none",
+        }),
+        // 取消：圆形图标按钮，配 CSS chevron-left；与 locateBtn 共享视觉语言
+        cancelBtn: (0, react_1.css)(Object.assign(Object.assign({}, flatBase), { pointerEvents: "auto", width: (0, rem_1.r)(54), height: (0, rem_1.r)(54), borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", transition: "background-color .12s, transform .12s", "&:active": {
+                backgroundColor: bgSubtle,
+                transform: "scale(0.94)",
+            } })),
+        // 纯 CSS 画 chevron-left：两条相邻 border 旋转 -45°，避免再引一段 SVG path
+        cancelBtnIcon: (0, react_1.css)({
+            width: (0, rem_1.r)(18),
+            height: (0, rem_1.r)(18),
+            borderTop: `${(0, rem_1.r)(5)} solid ${textPrimary}`,
+            borderLeft: `${(0, rem_1.r)(5)} solid ${textPrimary}`,
+            borderRadius: (0, rem_1.r)(2.5),
+            transform: "rotate(-45deg)",
+            // 视觉重心补偿：chevron 旋转后偏右，左移让光学上更居中
+            marginLeft: (0, rem_1.r)(4),
+        }),
+        // 确定：更醒目的主行动按钮，主色调阴影 + 按压缩放
+        confirmBtn: (0, react_1.css)({
+            pointerEvents: "auto",
+            minWidth: (0, rem_1.r)(88),
+            height: (0, rem_1.r)(54),
+            lineHeight: (0, rem_1.r)(54),
+            padding: `0 ${(0, rem_1.r)(24)}`,
+            backgroundColor: primary,
+            color: "#fff",
+            fontSize: (0, rem_1.r)(24),
+            fontWeight: 600,
+            letterSpacing: (0, rem_1.r)(2),
+            borderRadius: (0, rem_1.r)(27),
+            textAlign: "center",
+            border: "none",
+            // 主色 ~31% 透明的彩色阴影 + 1px 描边阴影，提升「浮起」与精致感
+            // boxShadow: `0 5px 14px ${primary}50, 0 1px 2px rgba(0,0,0,0.08)`,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.06)",
+            transition: "background-color .12s, transform .12s, box-shadow .12s",
+            "&:active": {
+                backgroundColor: primaryActive,
+                transform: "scale(0.96)",
+                boxShadow: `0 3px 9px ${primary}40, 0 1px 2px rgba(0,0,0,0.08)`,
+            },
+        }),
+        confirmDisabled: (0, react_1.css)({
+            opacity: 0.55,
+            pointerEvents: "none",
+        }),
+        // 「回到当前位置」按钮：与 topBar 右边距对齐 (0.28rem)，上抬避开高德版权
+        locateBtn: (0, react_1.css)(Object.assign(Object.assign({}, flatBase), { position: "absolute", right: (0, rem_1.r)(28), bottom: (0, rem_1.r)(40), zIndex: 6, width: (0, rem_1.r)(60), height: (0, rem_1.r)(60), borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", transition: "background-color .12s, transform .12s", "&:active": {
+                backgroundColor: bgSubtle,
+                transform: "scale(0.94)",
+            } })),
+        locateBtnIcon: (0, react_1.css)({
+            width: (0, rem_1.r)(30),
+            height: (0, rem_1.r)(30),
+            fill: textPrimary,
+            transition: "fill .12s",
+        }),
+        // 按钮内置 loading spinner：仅在 locateBtn 自身位置打转，不再用整屏 mask
+        locateBtnSpinner: (0, react_1.css)({
+            width: (0, rem_1.r)(32),
+            height: (0, rem_1.r)(32),
+            borderRadius: "50%",
+            border: `${(0, rem_1.r)(4)} solid rgba(0,0,0,0.12)`,
+            borderTopColor: primary,
+            animation: `${spinKf} 0.7s linear infinite`,
+            boxSizing: "border-box",
+        }),
+        // 下半部分容器
+        bottom: (0, react_1.css)({
+            flex: 1,
+            minHeight: 0,
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: bgPage,
+        }),
+        // 搜索区域：贴在下半屏顶部，与 listArea 垂直堆叠。
+        // 视觉规格沿用历史版本：白底卡片 + 圆角灰底输入条 + 左侧放大镜 + 右侧清除 X。
+        // 之所以让搜索框独立于地图浮层（而非顶部 topBar），是因为打车场景下用户多数情况
+        // 是先拖图选位置，搜索仅作为兜底入口；放在列表上方更符合视觉重心。
+        searchBox: (0, react_1.css)({
+            padding: `${(0, rem_1.r)(24)} ${(0, rem_1.r)(30)}`,
+            borderBottom: `1px solid ${border}`,
+        }),
+        searchInner: (0, react_1.css)({
+            display: "flex",
+            alignItems: "center",
+            height: (0, rem_1.r)(72),
+            backgroundColor: bgSubtle,
+            borderRadius: (0, rem_1.r)(36),
+            padding: `0 ${(0, rem_1.r)(24)}`,
+        }),
+        searchIcon: (0, react_1.css)({
+            width: (0, rem_1.r)(32),
+            height: (0, rem_1.r)(32),
+            fill: textTertiary,
+            marginRight: (0, rem_1.r)(15),
+            flexShrink: 0,
+        }),
+        searchInput: (0, react_1.css)({
+            flex: 1,
+            minWidth: 0,
+            height: "100%",
+            fontSize: (0, rem_1.r)(28),
+            lineHeight: (0, rem_1.r)(72),
+            color: textPrimary,
+            fontFamily: "inherit",
+            border: "none",
+            outline: "none",
+            backgroundColor: "transparent",
+            padding: 0,
+            "&::placeholder": {
+                color: textTertiary,
+            },
+        }),
+        searchClear: (0, react_1.css)({
+            width: (0, rem_1.r)(34),
+            height: (0, rem_1.r)(34),
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            cursor: "pointer",
+        }),
+        searchClearIcon: (0, react_1.css)({
+            width: (0, rem_1.r)(34),
+            height: (0, rem_1.r)(34),
+            display: "block",
+            fill: textTertiary,
+        }),
+        // 定位中：搜索框降色阶（输入框本身已 disabled，这里让外观也对齐）
+        searchDisabled: (0, react_1.css)({
+            opacity: 0.55,
+        }),
+        // 列表区域容器（高度 = bottom 剩余空间）
+        // position:relative 让 listLoadingMask 能用 absolute inset:0 精确盖住列表
+        listArea: (0, react_1.css)({
+            position: "relative",
+            flex: 1,
+            minHeight: 0,
+        }),
+        item: (0, react_1.css)({
+            position: "relative",
+            display: "flex",
+            alignItems: "flex-start",
+            padding: `${(0, rem_1.r)(24)} ${(0, rem_1.r)(30)}`,
+            borderBottom: `1px solid ${border}`,
+            backgroundColor: bgPage,
+            transition: "background-color .12s",
+            "&:active": {
+                backgroundColor: bgSubtle,
+            },
+        }),
+        itemBody: (0, react_1.css)({
+            flex: 1,
+            minWidth: 0,
+        }),
+        itemTitle: (0, react_1.css)({
+            fontSize: (0, rem_1.r)(30),
+            color: textPrimary,
+            lineHeight: 1.4,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+        }),
+        itemDesc: (0, react_1.css)({
+            marginTop: (0, rem_1.r)(6),
+            fontSize: (0, rem_1.r)(22),
+            color: textSecondary,
+            lineHeight: 1.4,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+        }),
+        // 选中态：标题用主色 + 加粗，跟右侧 itemCheck 钩选呼应。
+        itemTitleActive: (0, react_1.css)({
+            color: primary,
+            fontWeight: 500,
+        }),
+        itemCheck: (0, react_1.css)({
+            width: (0, rem_1.r)(50),
+            height: (0, rem_1.r)(50),
+            marginLeft: (0, rem_1.r)(20),
+            flexShrink: 0,
+            fill: primary,
+            alignSelf: "center",
+        }),
+        empty: (0, react_1.css)({
+            padding: `${(0, rem_1.r)(60)} 0`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: textTertiary,
+            fontSize: (0, rem_1.r)(26),
+        }),
+        listEnd: (0, react_1.css)({
+            padding: `${(0, rem_1.r)(24)} 0`,
+            textAlign: "center",
+            color: textTertiary,
+            fontSize: (0, rem_1.r)(22),
+        }),
+        // 定位中：地图层 —— 半透明白底 + 更柔的玻璃模糊 + 居中 spinner + 小号文字
+        locatingMask: (0, react_1.css)({
+            position: "absolute",
+            inset: 0,
+            backgroundColor: "rgba(255,255,255,0.62)",
+            WebkitBackdropFilter: "blur(3px)",
+            backdropFilter: "blur(3px)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: (0, rem_1.r)(18),
+            color: textPrimary,
+            fontSize: (0, rem_1.r)(24),
+            fontWeight: 500,
+            letterSpacing: (0, rem_1.r)(4),
+            zIndex: 8,
+        }),
+        // 旋转的 spinner 圆环
+        spinner: (0, react_1.css)({
+            width: (0, rem_1.r)(50),
+            height: (0, rem_1.r)(50),
+            borderRadius: "50%",
+            border: `${(0, rem_1.r)(5)} solid rgba(0,0,0,0.08)`,
+            borderTopColor: primary,
+            animation: `${spinKf} 0.8s linear infinite`,
+            boxSizing: "border-box",
+        }),
+        // 定位中：底部搜索 + 列表的锁定遮罩（透明，仅拦截点击）
+        bottomLockedMask: (0, react_1.css)({
+            position: "absolute",
+            inset: 0,
+            backgroundColor: "rgba(255,255,255,0.45)",
+            zIndex: 9,
+            cursor: "not-allowed",
+        }),
+        // 列表加载中：仅盖在 listArea 上的半透明遮罩 + 居中 spinner。
+        //
+        // 与 bottomLockedMask 的区别：
+        //   - bottomLockedMask 盖整个 bottom 区域（含搜索框），只在首次定位中触发；
+        //   - listLoadingMask 仅盖列表区，搜索框保持可输入——keyword 搜索期间用户可
+        //     继续打字修改关键字，不应被列表 loading 遮罩拦住交互。
+        //
+        // zIndex=4 比 ScrollView 高、比 bottomLockedMask(9) / locatingMask(8) 低——
+        // 这样首次定位中的全屏遮罩仍能盖在列表 loading 之上（避免视觉双层叠加）。
+        listLoadingMask: (0, react_1.css)({
+            position: "absolute",
+            inset: 0,
+            backgroundColor: "rgba(255,255,255,0.62)",
+            WebkitBackdropFilter: "blur(2px)",
+            backdropFilter: "blur(2px)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 4,
+        }),
+        // 底部容器需要相对定位，遮罩才能盖住
+        bottomRelative: (0, react_1.css)({
+            position: "relative",
+        }),
+    };
+}

package/build/MapLocationSelection/types.d.ts

@@ -0,0 +1,29 @@
+export type Coord = [number, number];
+export interface POIItem {
+    id: string;
+    name: string;
+    address: string;
+    location: {
+        lng: number;
+        lat: number;
+    };
+    cityname?: string;
+    pname?: string;
+    adname?: string;
+    distance?: number;
+    raw: any;
+}
+export interface SelectedLocation {
+    name: string;
+    address: string;
+    longitude: number;
+    latitude: number;
+    city?: string;
+    province?: string;
+    district?: string;
+    provinceCode?: string;
+    cityCode?: string;
+    districtCode?: string;
+    raw?: unknown;
+}
+export declare function haversineMeters(lng1: number, lat1: number, lng2: number, lat2: number): number;

package/build/MapLocationSelection/types.js

@@ -0,0 +1,22 @@
+"use strict";
+// ===== 与具体地图 SDK 解耦的共享类型 =====
+//
+// 设计原则：
+//   - UI 层（index.tsx）只看到这里的类型，不直接依赖 AMap / BMapGL；
+//   - 各 provider 内部把 SDK 原始数据映射成 POIItem 后再返回；
+//   - Coord 不约束坐标系：高德 provider 内部用 GCJ02，百度 provider 内部用 BD09，
+//     两者只与「自己」交互，UI 把数字透传给业务方即可。
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.haversineMeters = haversineMeters;
+// 球面距离（米）。两点都是同一坐标系下的经纬度即可——
+// BD09 / GCJ02 / WGS84 在小尺度（< 数十公里）下半径误差可忽略。
+function haversineMeters(lng1, lat1, lng2, lat2) {
+    const R = 6371000;
+    const toRad = (deg) => (deg * Math.PI) / 180;
+    const dLat = toRad(lat2 - lat1);
+    const dLng = toRad(lng2 - lng1);
+    const a = Math.pow(Math.sin(dLat / 2), 2) +
+        Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.pow(Math.sin(dLng / 2), 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    return R * c;
+}

package/build/MapLocationSelection/userMarker.d.ts

@@ -0,0 +1,2 @@
+export declare function ensureUserLocStyle(): void;
+export declare function createUserMarkerDom(): HTMLElement;

package/build/MapLocationSelection/userMarker.js

@@ -0,0 +1,95 @@
+"use strict";
+// 用户当前位置 marker 的样式与 DOM 创建。
+//
+// === 中心对齐策略 ===
+// 高德 AMap.Marker(content) 与百度 BMapGL.CustomOverlay 都允许塞任意 DOM 进来，
+// 但两端的"DOM 锚点"机制完全不同——而且 BMapGL 在某些版本下 anchors / offsetX / offsetY
+// 字段会被静默忽略（实测传 anchors=[0,0] 与 offsetY=6 都不生效），无法靠 SDK 参数把
+// 12x12 的圆点中心对齐 point。
+//
+// 这里改用一个 SDK-无关的 trick：
+//   - 外层 wrap 是 0x0 的"锚点容器"。任何 SDK 算锚点 / 偏移时，
+//     由于 width=height=0，所有候选锚点（top-left / 底部中心 / 居中 / ...）都退化为同一点
+//     —— 即 wrap 自身的左上角，也就是 point 在屏幕上的位置。
+//   - 内层 .mls-user-loc（12x12）用 absolute + (-6, -6) 让自己几何中心对齐 wrap(0, 0)。
+//
+// 因此只要给 SDK 传"原始 point"、不传任何 offset / anchor，圆点中心就一定落在 point 上，
+// 无需关心 SDK 实际默认锚点是 top-left 还是底部居中、字段名是否被识别。
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureUserLocStyle = ensureUserLocStyle;
+exports.createUserMarkerDom = createUserMarkerDom;
+const USER_LOC_STYLE_ID = "mls-user-loc-style";
+function ensureUserLocStyle() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(USER_LOC_STYLE_ID))
+        return;
+    const styleEl = document.createElement("style");
+    styleEl.id = USER_LOC_STYLE_ID;
+    // 仅保留 dot / ripple 两个子元素的视觉样式：尺寸 / 位置 / 涟漪动画。
+    // wrap 与 .mls-user-loc 的几何（width/height/position/left/top）全部由 createUserMarkerDom
+    // 在创建 DOM 时 inline 写死，这里不再声明，避免外部 CSS 加载顺序导致几何抖动。
+    styleEl.textContent = `
+.mls-user-loc__dot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 9px;
+  height: 9px;
+  margin-left: -4.5px;
+  margin-top: -4.5px;
+  border-radius: 50%;
+  background-color: #4575F6;
+  box-shadow: 0 0 0 1.5px #ffffff, 0 1px 2px rgba(0,0,0,0.25);
+}
+.mls-user-loc__ripple {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 9px;
+  height: 9px;
+  margin-left: -4.5px;
+  margin-top: -4.5px;
+  border-radius: 50%;
+  background-color: #4575F6;
+  opacity: 0.5;
+  animation: mlsUserLocRipple 1.8s ease-out infinite;
+}
+@keyframes mlsUserLocRipple {
+  0%   { transform: scale(1);   opacity: 0.5; }
+  80%  { transform: scale(3.5); opacity: 0;   }
+  100% { transform: scale(3.5); opacity: 0;   }
+}
+`;
+    document.head.appendChild(styleEl);
+}
+function createUserMarkerDom() {
+    ensureUserLocStyle();
+    // wrap：0x0 锚点容器。所有几何相关字段都用 inline style 强制锁定，
+    // 完全不依赖外部 .mls-user-loc-wrap 类（避免 CSS 加载顺序、SDK 内部覆写带来的干扰）。
+    // SDK 内部可能把 position 改成 absolute——那也是 positioned，子元素 absolute 仍以
+    // wrap 为参考；transform 也可能被 SDK 设置——不影响 wrap 自身 0x0 的 layout 尺寸。
+    const wrap = document.createElement("div");
+    wrap.style.position = "relative";
+    wrap.style.width = "0";
+    wrap.style.height = "0";
+    wrap.style.padding = "0";
+    wrap.style.margin = "0";
+    wrap.style.border = "0";
+    wrap.style.boxSizing = "content-box";
+    wrap.style.pointerEvents = "none";
+    // 真实可见的 marker：absolute -6/-6 让自身几何中心对齐 wrap(0, 0)
+    const inner = document.createElement("div");
+    inner.className = "mls-user-loc";
+    inner.style.position = "absolute";
+    inner.style.left = "-6px";
+    inner.style.top = "-6px";
+    inner.style.width = "12px";
+    inner.style.height = "12px";
+    inner.style.pointerEvents = "none";
+    inner.innerHTML =
+        '<span class="mls-user-loc__ripple"></span>' +
+            '<span class="mls-user-loc__dot"></span>';
+    wrap.appendChild(inner);
+    return wrap;
+}