Google 距离矩阵 - 解析响应并插入 html 元素 - javascript

Question

场景：

我从 DB 得到了一个营业地点列表，它看起来像这样

<div class="list-items"> 
.... 
<div id="distance" data-distance="<?= $placeid; ?>"></div>
</div>

然后我玩“geolocation.getCurrentPosition”并将所有标记放入地图
一旦我有了“原点”坐标和所有地点坐标，我就会计算距离和旅行时间。此刻我到达了这一点：

...
const destinations = [];
// initialize services distance matrix
const service = new google.maps.DistanceMatrixService();
const origin = { lat: +lat, lng: +lng};

   for (var k in results_obj) {
       var place = results_obj[k];
       /* 
       output of "place" object
       ...
       lat: "41.87028400"
       lng: "12.45226500"
       ...
       place_id: 4677
       ...
       */
       
        /* there i get an array  of places coordinates and then pass to request*/
        destinations.push(new google.maps.LatLng(p.lat, p.lng));
      
       ...
       }

       // build request
        const request = {
          origins: [origin],
          destinations: destinations,
          travelMode: google.maps.TravelMode.DRIVING,
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: true,
          avoidTolls: false,
        };

      // get distance matrix response
        
     service.getDistanceMatrix(request).then((response) => {
      // put response
     //document.getElementById("distance").innerText = JSON.stringify(response, null, 2);
                   
      console.log(response.rows[0]);

   });  
...

console.log(response.rows[0].elements[0]);输出看起来像这样

    .   {elements: Array(3)}
    .   elements: Array(3)
    .   0:
    .   distance: {text: '1,0 km', value: 961} duration: {text: '4 min', value: 215} status: "OK" 
    .   1:
    .   distance: {text: '1,9 km', value: 1876} duration: {text: '7 min', value: 398} status: "OK" 
    .   2:
    .   distance: {text: '1,5 km', value: 1547} duration: {text: '5 min', value: 277} status: "OK"

到目前为止它似乎工作正常。我需要你的帮助来将“距离”和“持续时间”值添加到 html 元素

所以这段代码

<div class="list-items"> 
.... 
<div id="distance" data-distance="<?= $placeid; ?>"></div>
</div>

必须要变成这样

<div class="list-items"> 
.... 
<div id="distance" data-distance="<?= $placeid; ?>">
<span>Distance: 1km</span> - <span> Duration: 5 min</span>
</div>
</div>

更新

// get distance matrix response
                service.getDistanceMatrix(request).then((response) => {
                    // put response
                    var results = response.rows[0].elements;

                    for (var j = 0; j < results.length; j++){
                        distance = results[j].distance.text;
                        duration = results[j].duration.text;
                        console.log(distance);
                        console.log(duration);

                    }
                });

现在我可以提取每个位置的距离和持续时间。

注意： $placeid;是营业地点的整数值。

谢谢。

Answer 1

这就是解决方案

service.getDistanceMatrix(request).then((response) => {
            var results = response.rows[0].elements;
            var distancesDOM = document.getElementsByClassName('distance');
            for (var j = 0; j < results.length; j++){
                var distance = results[j].distance.text;
                var duration = results[j].duration.text;
                var htmlContent = `<span><img src="//maps.gstatic.com/tactile/pane/travel-modes/2x/walk_black.png" style="opacity: .6; top: 16px; width: 22px; height: 22px;">${distance} - ${duration}</span>`;
                distancesDOM[j].innerHTML = htmlContent;
            }
        });

Google 距离矩阵 - 解析响应并插入 html 元素 - javascript

Google Distance Matrix - parse response and insert in html element - javascript

javascript

google-distancematrix-api