AR.js中获取gps-entity-place的distanceMsg返回null，如何实现标记距离显示？

原代码输出null的核心原因 #

• 读取时机不对：window.onload触发时，AR.js的gps-entity-place组件还在异步初始化流程里，既没有完成首次GPS定位，也没有计算出用户和标记点的距离，更没有把distanceMsg的值写入DOM节点属性，这时候调用getAttribute('distanceMsg')自然只能拿到null。
• 元素选择逻辑错位：页面里有两个带gps-entity-place属性的标记点，使用document.querySelector('[gps-entity-place]')永远只会选中第一个匹配的节点，就算后续值正常，也没法给第二个标记匹配对应的距离文本。
• 属性认知偏差：distanceMsg不是可以在HTML里预先静态定义的初始属性，是组件运行时每次GPS位置更新、重新计算完两点距离后动态维护的实时值，根本不存在于页面初始渲染的DOM属性里。

零成本实现实时距离显示的方法 #

不需要手动计算距离，直接用gps组件自带的事件机制就能搞定：

• 每个带gps-entity-place的标记节点，内部嵌套独立的距离文本子元素，让距离文本和对应标记一一绑定，不会出现数值串位
• 不要在页面加载完成时只读一次值，要监听gps组件触发的距离更新事件，每次组件重新算好距离时，同步把值更新到对应文本上
• 可以给距离文本设置比地点名称更小的缩放比例、更低的相对位置，实现“地点名下方显示实时距离”的排版效果

可直接复用的修正逻辑 #

初始化脚本不需要挂在window.onload上，直接写在页面脚本里就行：

// 遍历页面上所有绑定了gps位置的标记点
document.querySelectorAll('[gps-entity-place]').forEach((placeEl) => {
  // 监听组件自带的距离更新事件：每次GPS位置变化、组件重新计算完距离就会触发
  placeEl.addEventListener('distanceupdated', (evt) => {
    // 直接从事件参数里拿实时算好的距离文本，不需要自己读DOM属性
    const realtimeDistanceMsg = evt.detail.distanceMsg;
    // 找到当前标记内部专门用来显示距离的文本元素，更新内容
    const distanceDisplay = placeEl.querySelector('.distance-text');
    if (distanceDisplay) {
      distanceDisplay.setAttribute('value', realtimeDistanceMsg);
    }
  })
})

对应的HTML结构调整，每个gps标记内部整合地点名和距离文本：

<a-entity gps-entity-place="latitude: 18.45045; longitude: -96.96160;" look-at="[gps-camera]">
  <!-- 地点名称，靠上位置展示 -->
  <a-text value="place1" position="0 2 0" scale="35 35 35" look-at="[gps-camera]"></a-text>
  <!-- 实时距离文本，放在地点名称下方 -->
  <a-text class="distance-text" value="正在计算距离..." position="0 -1 0" scale="20 20 20" look-at="[gps-camera]"></a-text>
</a-entity>

小提示：因为GPS位置是实时变化的，用事件监听的方式会随着用户移动实时刷新距离数值，不会出现加载一次就固定死的问题。

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