如何实现点击地图标记后从屏幕底部弹出半高信息窗口及对应动画

实现方案 #

你要的这种弹窗通用叫法是底部抽屉（Bottom Sheet），核心逻辑是默认隐藏在屏幕底部之外，触发后通过位移动画滑动到半屏高度即可，不同开发场景的实现方式如下：

前端Web端（原生/框架通用） #

• 基础布局：写一个固定定位的容器，默认放在屏幕视口外，层级高于地图层
• 动画实现：给容器加位移过渡属性，激活时修改位置属性触发上滑动画
• 交互补充：可加半透明蒙层隔开地图和弹窗，点击蒙层可关闭弹窗

核心代码示例：

/* 弹窗容器样式 */
.gas-station-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  background: #ffffff;
  border-radius: 12px 12px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 1001;
  overflow-y: auto;
}
/* 激活弹出状态 */
.gas-station-sheet.show {
  transform: translateY(0);
}
/* 蒙层样式 */
.sheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: none;
}
.sheet-mask.show {
  display: block;
}

// 绑定Marker点击事件
marker.addEventListener('click', () => {
  // 填充当前点击加油站的信息
  document.querySelector('.gas-station-sheet').innerHTML = `
    <h3>XX加油站</h3>
    <p>地址：XXX路XX号</p>
    <p>当前油价：92#7.8元/升</p>
  `
  // 触发弹窗弹出
  document.querySelector('.gas-station-sheet').classList.add('show')
  document.querySelector('.sheet-mask').classList.add('show')
})

如果用Vue/React等框架，直接调用组件库的底部弹窗组件即可，比如Vant的Popup、AntD Mobile的BottomSheet，只需配置position: bottom、height: 50vh就可以直接使用，不需要自己写基础样式和动画。

安卓端 #

直接用官方提供的BottomSheetDialog组件，默认自带弹出动画，只需设置高度为半屏即可：

// 计算半屏高度
val halfHeight = resources.displayMetrics.heightPixels / 2
// 初始化弹窗
val bottomSheet = BottomSheetDialog(this)
bottomSheet.setContentView(R.layout.gas_station_info_layout)
// 设置弹窗高度
bottomSheet.behavior.peekHeight = halfHeight
// 点击Marker时调用展示
bottomSheet.show()
// 给布局控件赋值对应加油站信息即可

iOS端 #

iOS15及以上系统原生支持UISheetPresentationController，直接配置半高属性即可，自带平滑弹出动画：

// 初始化加油站信息页
let infoVC = GasStationInfoController()
if let sheet = infoVC.sheetPresentationController {
    // 设置为半屏高度
    sheet.detents = [.medium()]
    // 可选配置顶部拖动指示器
    sheet.prefersGrabberVisible = true
}
// 点击Marker时弹出
present(infoVC, animated: true)

内容的提问来源于stack exchange，提问作者Alec