fix(home): 修复地图浮层与定位按钮的层级和位置问题

hejianhao

2026-04-24 2e0dc0b0932bbba389b075f6e4dfd48eb6dc4ad9

fix(home): 修复地图浮层与定位按钮的层级和位置问题

调整地图顶部提示浮层的 z-index 为 2，避免被其他元素遮挡。新增浮层锚点初始化逻辑，根据 banner 数量动态计算定位按钮的底部偏移，确保浮层与定位按钮在不同内容高度下正确显示。

 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">

 src/pages/robotaxi/home/index.less

@@ -61,7 +61,7 @@
  position: fixed;
  top: 55%;
  left: 0px;
  z-index: 1;
  z-index: 2;

  .position-box {


 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}