From 2e0dc0b0932bbba389b075f6e4dfd48eb6dc4ad9 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期五, 24 四月 2026 21:54:42 +0800
Subject: [PATCH] fix(home): 修复地图浮层与定位按钮的层级和位置问题
---
src/pages/robotaxi/home/components/map-overlay-tips/index.tsx | 7 ++++++-
src/pages/robotaxi/home/index.less | 2 +-
src/pages/robotaxi/home/index.tsx | 49 ++++++++++++++++++++++++++++++++++++++++++++++++-
3 files changed, 55 insertions(+), 3 deletions(-)
diff --git a/src/pages/robotaxi/home/components/map-overlay-tips/index.tsx b/src/pages/robotaxi/home/components/map-overlay-tips/index.tsx
index 8d03117..45d24db 100644
--- a/src/pages/robotaxi/home/components/map-overlay-tips/index.tsx
+++ b/src/pages/robotaxi/home/components/map-overlay-tips/index.tsx
@@ -19,14 +19,19 @@
onOpenSetting: () => void;
/** 查看运营区域 */
onViewOperatingArea: () => void;
+ /** 初始化锚点底部偏移 */
+ anchorBottom?: number;
};
/**
* 地图顶部提示层。
*/
export default function MapOverlayTips(props: Props) {
+ const anchorStyle = typeof props.anchorBottom === 'number'
+ ? { top: 'auto', bottom: `${props.anchorBottom}px` }
+ : undefined;
return (
- <View className="content-box-top">
+ <View className="content-box-top" style={anchorStyle}>
<View className="position-box">
{
props.isGuest && <View className="visitor-stste ml-32">
diff --git a/src/pages/robotaxi/home/index.less b/src/pages/robotaxi/home/index.less
index 62fc6dd..613894b 100644
--- a/src/pages/robotaxi/home/index.less
+++ b/src/pages/robotaxi/home/index.less
@@ -61,7 +61,7 @@
position: fixed;
top: 55%;
left: 0px;
- z-index: 1;
+ z-index: 2;
.position-box {
diff --git a/src/pages/robotaxi/home/index.tsx b/src/pages/robotaxi/home/index.tsx
index 98d07cd..dab53ae 100644
--- a/src/pages/robotaxi/home/index.tsx
+++ b/src/pages/robotaxi/home/index.tsx
@@ -101,6 +101,8 @@
const [bannerList, setBannerList] = useState<any[]>([]); // 轮播图列表
const [orderData, setOrderData] = useState<any>({}); // 订单数据
const [isLogin, setIsLogin] = useState(false); // 是否登录
+ const [overlayAnchorBottom, setOverlayAnchorBottom] = useState<number | null>(null); // 浮层初始化锚点（距底部）
+ const overlayAnchorInitedRef = useRef(false); // 浮层锚点是否已初始化
const {
boxHeight,
originOpacity,
@@ -320,6 +322,9 @@
useDidShow(() => {
bootstrap.onDidShow();
+ setTimeout(() => {
+ initOverlayAnchor();
+ }, 80);
});
const { handleRegionChange, queryPointerByCenter } = useRegionChange({
@@ -359,6 +364,39 @@
const handleCloseCustomerService = () => {
setShowCustomerService(false);
};
+
+ // 初始化浮层锚点：固定在 content-box 顶部上方 32px
+ const initOverlayAnchor = () => {
+ if (overlayAnchorInitedRef.current) return;
+ // content-box 高度受 banner 数量影响：多 banner 复用 boxHeight，单 banner 走渲染后实测高度
+ if (bannerList.length > 1) {
+ const bottom = Math.max(0, Number(boxHeight) + 115);
+ if (bottom <= 0) return;
+ setOverlayAnchorBottom(bottom);
+ overlayAnchorInitedRef.current = true;
+ return;
+ }
+ const query = Taro.createSelectorQuery();
+ query.select('.content-box').boundingClientRect();
+ query.exec((res) => {
+ if (overlayAnchorInitedRef.current) return;
+ const rect = res?.[0];
+ const height = Number(rect?.height);
+ if (!Number.isFinite(height) || height <= 0) return;
+ const bottom = Math.max(0, height + 115);
+ setOverlayAnchorBottom(bottom);
+ overlayAnchorInitedRef.current = true;
+ });
+ };
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ Taro.nextTick(() => {
+ initOverlayAnchor();
+ });
+ }, 80);
+ return () => clearTimeout(timer);
+ }, [bannerList.length, tripStatus, boxHeight]);
// 处理点击地图 marker
const handleMarkerTap = (e: any) => {
@@ -410,7 +448,15 @@
<Image className="select-city-icon" src={selectCityIcon} />
</View>
{/* 定位图标 */}
- <View className="origin-box" style={{ opacity: originOpacity, transition: isDragging.current ? 'none' : 'opacity 0.2s ease-out' }}>
+ <View
+ className="origin-box"
+ style={{
+ opacity: originOpacity,
+ transition: isDragging.current ? 'none' : 'opacity 0.2s ease-out',
+ top: typeof overlayAnchorBottom === 'number' ? 'auto' : undefined,
+ bottom: typeof overlayAnchorBottom === 'number' ? `${overlayAnchorBottom}px` : undefined,
+ }}
+ >
<Image onClick={toOrigin} className="origin-icon" src={originIcon} />
</View>
<MapOverlayTips
@@ -420,6 +466,7 @@
isMaintain={isMaintain}
maintainBounce={maintainBounce}
hotfixEndText={hotfixEndText}
+ anchorBottom={overlayAnchorBottom ?? undefined}
onShowPrivacy={() => setShowPrivacy(true)}
onOpenSetting={handleOpenSetting}
onViewOperatingArea={handleViewOperatingArea}
--
Gitblit v1.7.1