clxx 3.0.2 → 3.0.4

package/build/RegionPicker/style.js

@@ -5,6 +5,7 @@ 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";
@@ -15,7 +16,7 @@ const border = "#e5e7eb";
 exports.DEFAULT_PRIMARY = "#2f7dff";
 function createStyle(primary, rounded = true) {
     const primaryActive = (0, color_1.darken)(primary, 0.15);
-    const sheetRadius = rounded ? ".24rem" : "0";
+    const sheetRadius = rounded ? (0, rem_1.r)(24) : "0";
     return {
         // 内容容器：动画/遮罩/全屏由 Dialog 提供，这里只保留视觉与排版
         sheet: (0, react_1.css)({
@@ -36,27 +37,27 @@ function createStyle(primary, rounded = true) {
         // 标题栏：底部 hairline 与列表区分；按钮中等字重
         header: (0, react_1.css)({
             flexShrink: 0,
-            height: ".92rem",
+            height: (0, rem_1.r)(92),
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            padding: "0 .16rem",
+            padding: `0 ${(0, rem_1.r)(16)}`,
             borderBottom: `1px solid ${border}`,
         }),
         title: (0, react_1.css)({
             flex: 1,
             textAlign: "center",
-            fontSize: ".3rem",
+            fontSize: (0, rem_1.r)(30),
             fontWeight: 600,
             color: textPrimary,
-            letterSpacing: ".01rem",
+            letterSpacing: (0, rem_1.r)(1),
         }),
         btn: (0, react_1.css)({
-            minWidth: "1.1rem",
-            padding: "0 .08rem",
-            fontSize: ".28rem",
+            minWidth: (0, rem_1.r)(110),
+            padding: `0 ${(0, rem_1.r)(8)}`,
+            fontSize: (0, rem_1.r)(28),
             fontWeight: 400,
-            lineHeight: ".92rem",
+            lineHeight: (0, rem_1.r)(92),
             cursor: "pointer",
             transition: "opacity .15s, color .15s",
         }),
@@ -83,8 +84,8 @@ function createStyle(primary, rounded = true) {
             flexShrink: 0,
             display: "flex",
             alignItems: "stretch",
-            height: ".8rem",
-            padding: "0 .16rem",
+            height: (0, rem_1.r)(80),
+            padding: `0 ${(0, rem_1.r)(16)}`,
             backgroundColor: bgSubtle,
             borderBottom: `1px solid ${border}`,
         }),
@@ -94,8 +95,8 @@ function createStyle(primary, rounded = true) {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            padding: "0 .08rem",
-            fontSize: ".26rem",
+            padding: `0 ${(0, rem_1.r)(8)}`,
+            fontSize: (0, rem_1.r)(26),
             color: textSecondary,
             position: "relative",
             cursor: "pointer",
@@ -103,7 +104,7 @@ function createStyle(primary, rounded = true) {
             whiteSpace: "nowrap",
             overflow: "hidden",
             textOverflow: "ellipsis",
-            letterSpacing: ".01rem",
+            letterSpacing: (0, rem_1.r)(1),
         }),
         tabPlaceholder: (0, react_1.css)({
             color: textTertiary,
@@ -115,18 +116,18 @@ function createStyle(primary, rounded = true) {
                 content: '""',
                 position: "absolute",
                 left: "50%",
-                bottom: ".06rem",
+                bottom: (0, rem_1.r)(6),
                 transform: "translateX(-50%)",
-                width: ".32rem",
-                height: ".04rem",
+                width: (0, rem_1.r)(32),
+                height: (0, rem_1.r)(4),
                 backgroundColor: primary,
-                borderRadius: ".02rem",
+                borderRadius: (0, rem_1.r)(2),
             },
         }),
         // 选项列表：固定高度避免跳变
         list: (0, react_1.css)({
             flexShrink: 0,
-            height: "5.28rem",
+            height: (0, rem_1.r)(528),
             overflowY: "auto",
             overflowX: "hidden",
             WebkitOverflowScrolling: "touch",
@@ -136,11 +137,11 @@ function createStyle(primary, rounded = true) {
         // 列表项：底部 hairline 分隔（CitySelect 风），按下浅灰底
         listItem: (0, react_1.css)({
             position: "relative",
-            height: ".88rem",
+            height: (0, rem_1.r)(88),
             display: "flex",
             alignItems: "center",
-            padding: "0 .3rem",
-            fontSize: ".3rem",
+            padding: `0 ${(0, rem_1.r)(30)}`,
+            fontSize: (0, rem_1.r)(30),
             color: textPrimary,
             backgroundColor: bgPage,
             borderBottom: `1px solid ${border}`,
@@ -155,7 +156,7 @@ function createStyle(primary, rounded = true) {
             whiteSpace: "nowrap",
             overflow: "hidden",
             textOverflow: "ellipsis",
-            letterSpacing: ".01rem",
+            letterSpacing: (0, rem_1.r)(1),
         }),
         listItemSelected: (0, react_1.css)({
             color: primary,
@@ -163,28 +164,28 @@ function createStyle(primary, rounded = true) {
         }),
         // 对勾
         checkIcon: (0, react_1.css)({
-            width: ".32rem",
-            height: ".32rem",
+            width: (0, rem_1.r)(32),
+            height: (0, rem_1.r)(32),
             flexShrink: 0,
-            marginLeft: ".16rem",
+            marginLeft: (0, rem_1.r)(16),
             position: "relative",
             "&::after": {
                 content: '""',
                 position: "absolute",
-                left: ".06rem",
-                top: ".04rem",
-                width: ".1rem",
-                height: ".2rem",
+                left: (0, rem_1.r)(6),
+                top: (0, rem_1.r)(4),
+                width: (0, rem_1.r)(10),
+                height: (0, rem_1.r)(20),
                 border: `solid ${primary}`,
-                borderWidth: "0 .03rem .03rem 0",
+                borderWidth: `0 ${(0, rem_1.r)(3)} ${(0, rem_1.r)(3)} 0`,
                 transform: "rotate(45deg)",
             },
         }),
         // 空数据占位
         empty: (0, react_1.css)({
-            padding: ".6rem 0",
+            padding: `${(0, rem_1.r)(60)} 0`,
             textAlign: "center",
-            fontSize: ".26rem",
+            fontSize: (0, rem_1.r)(26),
             color: textTertiary,
         }),
     };

package/build/ScrollView/style.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = void 0;
 const react_1 = require("@emotion/react");
+const rem_1 = require("../utils/rem");
 // 模仿 iOS「正在输入」气泡的三点呼吸节奏
 const dotPulse = (0, react_1.keyframes) `
   0%, 80%, 100% {
@@ -23,12 +24,12 @@ exports.style = {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        gap: ".12rem",
-        padding: ".24rem 0",
+        gap: (0, rem_1.r)(12),
+        padding: `${(0, rem_1.r)(24)} 0`,
     },
     loadingDot: (0, react_1.css) `
-    width: 0.12rem;
-    height: 0.12rem;
+    width: ${(0, rem_1.r)(12)};
+    height: ${(0, rem_1.r)(12)};
     border-radius: 50%;
     background: #c7c7cc;
     animation: ${dotPulse} 1.2s ease-in-out infinite both;

package/build/Toast/style.js

@@ -4,6 +4,7 @@ exports.style = exports.bottomHideAnimation = exports.bottomShowAnimation = expo
 exports.getAnimation = getAnimation;
 const react_1 = require("@emotion/react");
 const theme_1 = require("../utils/theme");
+const rem_1 = require("../utils/rem");
 const easing = "cubic-bezier(.22,.61,.36,1)";
 exports.middleShowAnimation = (0, react_1.keyframes) `
   from {
@@ -95,7 +96,7 @@ exports.style = {
         left: "50%",
         transform: "translateX(-50%)",
         zIndex: 9999,
-        maxWidth: "6rem",
+        maxWidth: (0, rem_1.r)(600),
         pointerEvents: "none",
         fontFamily: theme_1.fontStack,
         WebkitFontSmoothing: "antialiased",
@@ -111,12 +112,12 @@ exports.style = {
         whiteSpace: "pre-wrap",
         wordBreak: "break-word",
         lineHeight: 1.5,
-        fontSize: ".28rem",
+        fontSize: (0, rem_1.r)(28),
         fontWeight: 400,
-        letterSpacing: ".01rem",
+        letterSpacing: (0, rem_1.r)(1),
         textAlign: "center",
-        padding: ".2rem .32rem",
-        boxShadow: "0 .12rem .32rem rgba(0,0,0,.18)",
+        padding: `${(0, rem_1.r)(20)} ${(0, rem_1.r)(32)}`,
+        boxShadow: `0 ${(0, rem_1.r)(12)} ${(0, rem_1.r)(32)} rgba(0,0,0,.18)`,
         backdropFilter: "blur(20px) saturate(160%)",
         WebkitBackdropFilter: "blur(20px) saturate(160%)",
     }),

package/build/index.d.ts

@@ -9,6 +9,7 @@ export { defaultScroll } from './utils/defaultScroll';
 export { is } from './utils/is';
 export { waitFor, waitUntil } from './utils/wait';
 export { normalizeUnit, splitValue } from './utils/cssUtil';
+export { r } from './utils/rem';
 export { createApp, history, getHistory } from './utils/createApp';
 export { createPortalDOM } from './utils/dom';
 export { useInterval } from './Effect/useInterval';
@@ -37,3 +38,5 @@ export { CarouselNotice } from './CarouselNotice';
 export { CitySelect, showCitySelect } from './CitySelect';
 export { DatePicker, showDatePicker } from './DatePicker';
 export { RegionPicker, showRegionPicker } from './RegionPicker';
+export { MapLocationSelection, showMapLocationSelection, getLocation, } from './MapLocationSelection';
+export type { MapLocationSelectionProps, SelectedLocation, GetLocationOptions, } from './MapLocationSelection';

package/build/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.showUniqToast = exports.showToast = exports.Overlay = exports.Countdowner = exports.ColStart = exports.ColEvenly = exports.ColEnd = exports.ColCenter = exports.ColBetween = exports.ColAround = exports.Col = exports.RowStart = exports.RowEvenly = exports.RowEnd = exports.RowCenter = exports.RowBetween = exports.RowAround = exports.Row = exports.FlexItem = exports.Flex = exports.Container = exports.Ago = exports.useViewport = exports.useWindowResize = exports.useUpdate = exports.useTick = exports.useInterval = exports.createPortalDOM = exports.getHistory = exports.history = exports.createApp = exports.splitValue = exports.normalizeUnit = exports.waitUntil = exports.waitFor = exports.is = exports.defaultScroll = exports.Countdown = exports.calendarTable = exports.registerHostAlias = exports.buildUrlByOption = exports.sendRequest = exports.sugarSend = exports.sendJSON = exports.POST = exports.GET = exports.ago = exports.uniqKey = exports.jsonp = exports.tick = void 0;
-exports.showRegionPicker = exports.RegionPicker = exports.showDatePicker = exports.DatePicker = exports.showCitySelect = exports.CitySelect = exports.CarouselNotice = exports.ScrollView = exports.showAlert = exports.AutoGrid = exports.SafeArea = exports.showLoadingAtLeast = exports.showLoading = exports.Indicator = exports.Clickable = exports.showDialog = void 0;
+exports.showToast = exports.Overlay = exports.Countdowner = exports.ColStart = exports.ColEvenly = exports.ColEnd = exports.ColCenter = exports.ColBetween = exports.ColAround = exports.Col = exports.RowStart = exports.RowEvenly = exports.RowEnd = exports.RowCenter = exports.RowBetween = exports.RowAround = exports.Row = exports.FlexItem = exports.Flex = exports.Container = exports.Ago = exports.useViewport = exports.useWindowResize = exports.useUpdate = exports.useTick = exports.useInterval = exports.createPortalDOM = exports.getHistory = exports.history = exports.createApp = exports.r = exports.splitValue = exports.normalizeUnit = exports.waitUntil = exports.waitFor = exports.is = exports.defaultScroll = exports.Countdown = exports.calendarTable = exports.registerHostAlias = exports.buildUrlByOption = exports.sendRequest = exports.sugarSend = exports.sendJSON = exports.POST = exports.GET = exports.ago = exports.uniqKey = exports.jsonp = exports.tick = void 0;
+exports.getLocation = exports.showMapLocationSelection = exports.MapLocationSelection = exports.showRegionPicker = exports.RegionPicker = exports.showDatePicker = exports.DatePicker = exports.showCitySelect = exports.CitySelect = exports.CarouselNotice = exports.ScrollView = exports.showAlert = exports.AutoGrid = exports.SafeArea = exports.showLoadingAtLeast = exports.showLoading = exports.Indicator = exports.Clickable = exports.showDialog = exports.showUniqToast = void 0;
 var tick_1 = require("./utils/tick");
 Object.defineProperty(exports, "tick", { enumerable: true, get: function () { return tick_1.tick; } });
 var jsonp_1 = require("./utils/jsonp");
@@ -32,6 +32,8 @@ Object.defineProperty(exports, "waitUntil", { enumerable: true, get: function ()
 var cssUtil_1 = require("./utils/cssUtil");
 Object.defineProperty(exports, "normalizeUnit", { enumerable: true, get: function () { return cssUtil_1.normalizeUnit; } });
 Object.defineProperty(exports, "splitValue", { enumerable: true, get: function () { return cssUtil_1.splitValue; } });
+var rem_1 = require("./utils/rem");
+Object.defineProperty(exports, "r", { enumerable: true, get: function () { return rem_1.r; } });
 var createApp_1 = require("./utils/createApp");
 Object.defineProperty(exports, "createApp", { enumerable: true, get: function () { return createApp_1.createApp; } });
 Object.defineProperty(exports, "history", { enumerable: true, get: function () { return createApp_1.history; } });
@@ -106,3 +108,7 @@ Object.defineProperty(exports, "showDatePicker", { enumerable: true, get: functi
 var RegionPicker_1 = require("./RegionPicker");
 Object.defineProperty(exports, "RegionPicker", { enumerable: true, get: function () { return RegionPicker_1.RegionPicker; } });
 Object.defineProperty(exports, "showRegionPicker", { enumerable: true, get: function () { return RegionPicker_1.showRegionPicker; } });
+var MapLocationSelection_1 = require("./MapLocationSelection");
+Object.defineProperty(exports, "MapLocationSelection", { enumerable: true, get: function () { return MapLocationSelection_1.MapLocationSelection; } });
+Object.defineProperty(exports, "showMapLocationSelection", { enumerable: true, get: function () { return MapLocationSelection_1.showMapLocationSelection; } });
+Object.defineProperty(exports, "getLocation", { enumerable: true, get: function () { return MapLocationSelection_1.getLocation; } });

package/build/utils/rem.d.ts

@@ -0,0 +1 @@
+export declare function r(px750: number): string;

package/build/utils/rem.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.r = r;
+// 把 750 设计稿下的像素值转成响应式 css 长度。
+//
+// 库内组件统一使用 r() 表达尺寸，不再写 ".28rem" 字面量——这样即便用户在
+// Container 上传入非 750 的 designWidth（如 375 / 1080），库内组件的视觉比例
+// 仍然按 750 设计稿计算，不会被放大或缩小。
+//
+// 实现原理：依赖 Container 注入的 --clxx-px 变量。
+//   - --clxx-px 的语义是「750 设计稿下的 1px 在当前视口下渲染成多少 css px」
+//     即 --clxx-px = clamp(viewport, maxWidth) / 750（单位 px）
+//   - r(28) → calc(28 * var(--clxx-px, 1px))
+//             视口 750 时 = 28px
+//             视口 375 时 = 14px
+//             视口 1080（无 maxWidth）时 = 40.32px
+//             —— 与原 ".28rem" 在默认 designWidth=750 + 同视口下完全一致
+//
+// fallback 1px：用户未挂 Container 时（或 SSR 首屏未注入 :root 变量），
+// calc 不会因 var() 解析失败而整体 invalid，组件至少能以 750 设计稿原像素显示，
+// 不会坍缩成 width:auto / padding:0。
+//
+// 与「写字面 rem」相比的关键差异：
+//   - rem 字面量受 html font-size 影响，html font-size 由 Container 按
+//     **用户的** designWidth 计算 —— 用户改 designWidth=375 时库内 rem 视觉翻倍；
+//   - r() 走独立 CSS 变量 --clxx-px，与用户 designWidth 完全解耦，永远稳。
+//
+// 性能：calc/var 是 specified→computed 一次求值，结果进 computed style 缓存，
+// 不会每帧重算。同 px 值复用同一字符串实例（cache），减少 GC 压力，emotion
+// className hash 命中率也更高。
+//
+// @param px750 在 750 设计稿下的像素值
+// @returns css 长度字符串，可直接喂给 emotion css 对象 / 模板字符串 / 内联 style
+//
+// @example
+//   // before
+//   const style = css({ padding: ".2rem .32rem" });
+//   // after
+//   const style = css({ padding: `${r(20)} ${r(32)}` });
+const cache = new Map();
+function r(px750) {
+    const cached = cache.get(px750);
+    if (cached !== undefined)
+        return cached;
+    const value = `calc(${px750} * var(--clxx-px, 1px))`;
+    cache.set(px750, value);
+    return value;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",
@@ -8,7 +8,7 @@
     "example": "example"
   },
   "scripts": {
-    "start": "tsc -w --pretty",
+    "dev": "tsc -w --pretty",
     "build": "rimraf ./build && tsc",
     "pub": "npm run build && npm publish"
   },

package/test/src/index/index.jsx

@@ -19,6 +19,11 @@ const pageConfig = [
   { path: "city-select", title: "CitySelect城市选择器", enable: true },
   { path: "date-picker", title: "DatePicker日期时间选择器", enable: true },
   { path: "region-picker", title: "RegionPicker省市区选择器", enable: true },
+  {
+    path: "map-location-selection",
+    title: "MapLocationSelection地图选址",
+    enable: true,
+  },
 ];
 
 export default function Index() {

package/test/src/index.jsx

@@ -7,6 +7,7 @@ createApp({
   target: "#root",
   // maxDocWidth: 10000,
   maxWidth: 750,
+  // designWidth: 375,
   async render(pathname) {
     const module = await import(`./${pathname}/index.jsx`);
     const Page = module.default;

package/test/src/map-location-selection/index.jsx

@@ -0,0 +1,192 @@
+import { showMapLocationSelection, getLocation } from "@";
+
+const AMAP_KEY = "9e93b7084bb3da8d2094c02dc4221d47";
+// JSAPI v2.0 调用 PlaceSearch / Geocoder / AutoComplete 等服务类接口必须配置安全密钥
+const AMAP_SECURITY_JS_CODE = "d57bb5e049555d04e0dabcd7557ce5e2";
+
+const BMAP_AK = "YS5En8FGCXQnAt65nAXn5LOUP5ANRRQy";
+
+const reportSelected = (loc) => {
+  console.log("选择了位置：", loc);
+  const region = [loc.province, loc.city, loc.district]
+    .filter(Boolean)
+    .join(" / ");
+  const codes = [loc.provinceCode, loc.cityCode, loc.districtCode]
+    .filter(Boolean)
+    .join(" / ");
+  alert(
+    `已选择：${loc.name || "(无名称)"}\n` +
+      `地址：${loc.address}\n` +
+      `经纬度：${loc.longitude.toFixed(6)}, ${loc.latitude.toFixed(6)}\n` +
+      `行政区划：${region || "(未返回)"}\n` +
+      `行政区划码：${codes || "(未返回)"}`,
+  );
+};
+
+// 调用函数式 getLocation，返回值与组件 onSelect 完全同结构（共享
+// buildSelectedLocation 拼装），用 reportSelected 弹同样的展示框。
+const reportError = (err) => {
+  console.error("getLocation 失败：", err);
+  alert(`定位失败：${err?.message || err}`);
+};
+
+export default function Index() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.2rem",
+        padding: "0.3rem",
+      }}
+    >
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            amapKey: AMAP_KEY,
+            securityJsCode: AMAP_SECURITY_JS_CODE,
+            onSelect: reportSelected,
+            onClose: () => {
+              console.log("关闭了地图选址（高德）");
+            },
+          });
+        }} 
+      >
+        打开地图选址（高德）
+      </button>
+
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            amapKey: AMAP_KEY,
+            securityJsCode: AMAP_SECURITY_JS_CODE,
+            initialCity: "上海",
+            // GCJ02 上海人民广场
+            initialCenter: [121.473667, 31.230525],
+            primary: "#07c160",
+            onSelect: reportSelected,
+          });
+        }}
+      >
+        打开地图选址（高德 - 上海，绿色主题）
+      </button>
+
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            provider: "bmap",
+            bmapAk: BMAP_AK,
+            onSelect: reportSelected,
+            onClose: () => {
+              console.log("关闭了地图选址（百度）");
+            },
+          });
+        }}
+      >
+        打开地图选址（百度）
+      </button>
+
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            provider: "bmap",
+            bmapAk: BMAP_AK,
+            // BD09 上海人民广场
+            initialCenter: [121.479675, 31.236397],
+            primary: "#07c160",
+            onSelect: reportSelected,
+          });
+        }}
+      >
+        打开地图选址（百度 - 上海，绿色主题）
+      </button>
+
+      {/* 函数式 getLocation：不弹窗、直接拿一份 SelectedLocation。
+          数据格式与上方 reportSelected 完全一致，复用同一个展示弹框。 */}
+      <button
+        onClick={() => {
+          getLocation({
+            amapKey: AMAP_KEY,
+            securityJsCode: AMAP_SECURITY_JS_CODE,
+          })
+            .then(reportSelected)
+            .catch(reportError);
+        }}
+      >
+        getLocation（高德 - 默认，禁用 IP 兜底）
+      </button>
+
+      <button
+        onClick={() => {
+          getLocation({
+            amapKey: AMAP_KEY,
+            securityJsCode: AMAP_SECURITY_JS_CODE,
+            allowIpFallback: true,
+          })
+            .then(reportSelected)
+            .catch(reportError);
+        }}
+      >
+        getLocation（高德 - 允许 IP 兜底）
+      </button>
+
+      <button
+        onClick={() => {
+          getLocation({
+            provider: "bmap",
+            bmapAk: BMAP_AK,
+          })
+            .then(reportSelected)
+            .catch(reportError);
+        }}
+      >
+        getLocation（百度 - 默认，禁用 IP 兜底）
+      </button>
+
+      <button
+        onClick={() => {
+          getLocation({
+            provider: "bmap",
+            bmapAk: BMAP_AK,
+            allowIpFallback: true,
+          })
+            .then(reportSelected)
+            .catch(reportError);
+        }}
+      >
+        getLocation（百度 - 允许 IP 兜底）
+      </button>
+
+      {/* 组件入口的 IP 兜底测试：在 H5 GPS 失败 / 拒绝授权 / 室内信号差时，
+          高德 / 百度 SDK 内部默认会自动 IP 定位（城市级精度，accuracy 通常
+          ≥ 5000m）。组件默认丢弃 IP 结果（allowIpFallback=false）→ 回到
+          fallback 中心；传 allowIpFallback=true 后接受 IP 结果 → 列表展示
+          city 级附近。 */}
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            amapKey: AMAP_KEY,
+            securityJsCode: AMAP_SECURITY_JS_CODE,
+            allowIpFallback: true,
+            onSelect: reportSelected,
+          });
+        }}
+      >
+        打开地图选址（高德 - 允许 IP 兜底）
+      </button>
+
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            provider: "bmap",
+            bmapAk: BMAP_AK,
+            allowIpFallback: true,
+            onSelect: reportSelected,
+          });
+        }}
+      >
+        打开地图选址（百度 - 允许 IP 兜底）
+      </button>
+    </div>
+  );
+}