首页 / OpenLayers / 使用示例
设备方向与地图旋转
监听 deviceorientation 的 alpha 方位角,把地图旋转成朝向一致的方向;没有传感器时用滑块模拟。
源码与运行效果
说明
deviceorientation 事件给出三个角度:alpha 是绕 z 轴的方位角,
beta 与 gamma 是前后、左右的倾斜。示例只取 alpha,
把它换算成 view.setRotation(−alpha),地图就跟着设备一起转。
iOS 需要在用户手势里调用 DeviceOrientationEvent.requestPermission(),
因此单独放了一个权限按钮;桌面浏览器通常没有传感器,事件不会触发,
此时用滑块手动设置方位角,效果与真机一致。
| 操作 | 结果 |
|---|---|
| 在手机上点击「请求传感器权限」 | 授权后地图随设备转动 |
| 拖动「方位角」滑块 | 地图按角度旋转 |
| 点击右上角指北针 | 旋转复位到正北 |
旋转后的地图在平移时按屏幕方向响应,用户朝哪走就往哪拖,这是导航类应用保持朝向的常见做法。