`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

定位与朝向

读取浏览器定位与设备朝向,把当前位置画成带方向箭头的标记。

OpenLayers 10.3.1 · 更新 2026-10-27
`r`n
源码与运行效果
运行效果
`r`n

说明

ol.Geolocation 封装了 navigator.geolocation, 设置 projection: 'EPSG:3857' 后 getPosition() 直接返回米制坐标。开启跟踪会触发浏览器的授权提示。

定位精度用半透明圆表示,朝向箭头在拿到 getHeading() 时跟随设备旋转; 桌面端没有传感器时,用按钮模拟 0° 与 90°。

操作结果
点「开启定位」并授权标记跳到当前位置,精度圈同步出现
在手机上转动设备箭头按朝向旋转,地图保持北朝上
点「模拟朝向」无传感器时也能演示箭头旋转

定位只在 HTTPS 或 localhost 下可用;内网 HTTP 地址会直接报错,先确认协议再排查代码。

`r`n
`r`n