Google Distance Matrix返回结果解析并插入HTML元素的JavaScript实现问题

实现方案 #

你只需要按下面两步调整代码即可：

1. 新增一个数组存储商家ID，和传入接口的地点顺序一一对应
2. 拿到距离结果后，通过data-distance属性匹配对应商家的DOM元素，插入内容

完整修改后的代码

1. 商家列表处理部分

const destinations = [];
// 新增：存储每个地点的place_id，顺序和destinations完全对应
const placeIds = [];
// 初始化距离矩阵服务
const service = new google.maps.DistanceMatrixService();
const origin = { lat: +lat, lng: +lng};

for (var k in results_obj) {
    var place = results_obj[k];
    // 修复原有笔误：p.lat改为place.lat
    destinations.push(new google.maps.LatLng(place.lat, place.lng));
    // 存入当前商家的place_id
    placeIds.push(place.place_id);
}

// 构建请求参数部分保持不变
const request = {
  origins: [origin],
  destinations: destinations,
  travelMode: google.maps.TravelMode.DRIVING,
  unitSystem: google.maps.UnitSystem.METRIC,
  avoidHighways: true,
  avoidTolls: false,
};

2. 接口回调处理部分

service.getDistanceMatrix(request).then((response) => {
    var results = response.rows[0].elements;
    for (var j = 0; j < results.length; j++){
        const element = results[j];
        // 匹配当前结果对应的商家DOM
        const distanceDom = document.querySelector(`[data-distance="${placeIds[j]}"]`);
        // 容错处理：接口返回正常、DOM存在才插入内容
        if (element.status === 'OK' && distanceDom) {
            const distance = element.distance.text;
            const duration = element.duration.text;
            distanceDom.innerHTML = `<span>Distance: ${distance}</span> - <span> Duration: ${duration}</span>`;
        }
    }
});

补充说明：你原有HTML中所有距离容器都用了相同的id="distance"不符合HTML规范（id必须全局唯一），上面的实现没有依赖id选择，所以不影响功能运行，你可以根据需要把重复的id改成class="distance"即可。

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