IONIC框架下使用谷歌API比对多地址获取最近地址的实现问题

第一步：调整距离计算逻辑，关联距离和对应地址 #

你当前的代码仅计算了距离值，但没有将值存储到对应用户的对象属性中，先修改这段逻辑：

// 先清空历史数据避免重复累加
this.drivers = []
data.forEach(element => {
  const distance = this.distanceInKmBetweenEarthCoordinates(
    this.Senderlat,
    this.Senderlng,
    parseFloat(element.lat),
    parseFloat(element.lng)
  )
  // 将计算好的距离挂载到当前用户对象的distance字段
  element.distance = distance
  this.drivers.push(element)
})

第二步：按距离从小到大排序 #

所有距离计算完成后，对drivers数组做升序排序，距离最近的用户会自动排在数组最前面：

this.drivers.sort((a, b) => a.distance - b.distance)

如果只需要展示距离最近的1个用户，直接取排序后的第一个元素即可：

this.nearestUser = this.drivers[0]

第三步：调整HTML渲染代码 #

原来的循环逻辑不需要大改，直接遍历已经排好序的数组即可，注意修正你原来代码里缺失的闭合引号：

<ion-item lines="none" *ngFor="let item of drivers">
  <!-- 可自行添加距离展示 -->
  <ion-label>用户距离：{{item.distance.toFixed(2)}}km</ion-label>
</ion-item>

如果仅展示最近的1个用户，直接绑定对应变量即可：

<ion-item lines="none" *ngIf="nearestUser">
  <ion-label>最近用户：{{nearestUser.name}}，距离{{nearestUser.distance.toFixed(2)}}km</ion-label>
</ion-item>

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