仅用HTML/CSS/JavaScript实现固定双iPhone位置测距单页Web应用开发咨询

仅靠HTML/CSS/JavaScript完全可以实现核心的位置展示、距离计算逻辑，但有一个无法绕过的前置限制：纯静态前端没有跨设备的位置共享通道。
你这个需求因为是固定两台设备（你和好友的iPhone）、不需要对外开放用户配置能力，所以不需要做复杂的设备管理、用户登录体系，只要解决两个设备的位置数据同步问题，就能做出可用的极简单页应用，不需要投入复杂的后端开发成本。

Geolocation API 实际适用性 #

• 对iPhone端的兼容性完全达标：iOS上所有主流浏览器（Safari、Chrome、Edge）都支持标准的Geolocation接口，只要用户授权位置权限，户外场景下的定位精度通常在5-15米，足够日常测距展示使用
• iOS系统有硬性调用限制：所有调用Geolocation API的页面必须部署在HTTPS域名下，本地file协议打开、非HTTPS的HTTP站点会直接拦截权限申请，连授权弹窗都不会弹出
• 基础调用代码参考：

// 申请高精度定位，超时时间10秒
navigator.geolocation.getCurrentPosition(
  (res) => {
    // 直接拿到当前打开页面的这台iPhone的经纬度
    const currentLat = res.coords.latitude;
    const currentLon = res.coords.longitude;
  },
  (error) => console.log('定位失败：', error.message),
  { enableHighAccuracy: true, timeout: 10000 }
)

两台目标设备的匹配与距离计算逻辑 #

根本不需要做复杂的设备指纹、身份识别来区分两台目标设备，因为使用场景是固定的两个使用人：

• 你自己打开这个页面的时候，Geolocation API拿到的就是你的iPhone位置，把这个数据存到共享存储里，标记为「我的位置」字段
• 好友打开同一个页面的时候，API拿到的就是他的iPhone位置，把这个数据存到同一个共享存储里，标记为「好友的位置」字段
• 只要页面能同时读取到这两个存储节点里的经纬度值，就能直接计算两者的距离，整个流程不需要用户做任何手动配置

距离计算不需要依赖第三方地图库，直接用纯JS实现的Haversine公式（地球表面两点测距的标准算法）即可：

// 计算地球表面两点的直线距离，返回值单位为米
function getDistance(lat1, lon1, lat2, lon2) {
  const R = 6371000; // 地球平均半径，单位米
  const radLat1 = lat1 * Math.PI / 180;
  const radLat2 = lat2 * Math.PI / 180;
  const deltaLat = (lat2 - lat1) * Math.PI / 180;
  const deltaLon = (lon2 - lon1) * Math.PI / 180;

  const a = Math.sin(deltaLat / 2) ** 2 +
    Math.cos(radLat1) * Math.cos(radLat2) *
    Math.sin(deltaLon / 2) ** 2;
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return R * c;
}

极简开发步骤 #

• 先搭基础页面结构：用HTML做两个信息卡片（分别展示你的位置坐标、好友的位置坐标）、一个大字号的距离展示区，用CSS做移动端适配，保证iPhone打开的时候布局没有错位
• 选一个支持实时同步的无服务器存储通道：不需要自己写后端，只要能让两个设备往同一个公共数据节点写/读数据就行，把两个位置数据的字段名在代码里写死，不需要用户选择
• 实现页面核心逻辑：打开页面就自动请求高精度定位，把当前设备的经纬度实时写到对应字段里，同时监听存储节点的变化，只要两个经纬度都拿到了，就调用距离计算函数，把结果渲染到页面上
• 部署上线：把整个页面托管在支持HTTPS的静态站点上，把链接发给你和好友，各自在自己的iPhone上打开授权位置权限就能使用

容易踩的坑 #

• 不要尝试靠IP地址、浏览器指纹来识别两台设备：IP定位的精度差到几百米甚至跨区县，完全达不到测距的精度要求，只有设备本身通过Geolocation API上报的经纬度是可用的
• 不要直接把HTML文件发给好友让他在本地打开：iOS浏览器会直接拦截本地文件的位置权限，必须部署在HTTPS的站点上才能正常工作
• 计算出来的结果是两点之间的直线空间距离，不是实际通行的路面距离，如果要做导航级的距离需要额外接入地图SDK，完全不符合你要的极简需求

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