Question

我有以下代码生成两个TRACER并在地图中显示它们，并且还显示两点之间的联合。

<?php 
$latitudInicio = $_GET['latitudInicio'];
$longitudInicio = $_GET['longitudInicio'];
$latitudFin = $_GET['latitudFin'];
$longitudFin = $_GET['longitudFin'];
?>
<!DOCTYPE html>
<html>
 <body>
  <div id="map" style="width: 100%; height: 700px;"></div>
   <script>
    function initMap() {
        var inicio = {lat: <?php echo $latitudInicio ?>, lng: <?php echo $longitudInicio ?>};
        var fin = {lat: <?php echo $latitudFin ?>, lng: <?php echo $longitudFin ?>};
        var map = new google.maps.Map(document.getElementById('map'), {
            center: inicio,
            zoom: 7
        });

        var inicioMarker = new google.maps.Marker({
            position: inicio,
            map: map,
            title: '<?php echo $latitudInicio ?> <?php echo $longitudInicio ?>'
        });
        var finMarker = new google.maps.Marker({
            position: fin,
            map: map,
            title: '<?php echo $latitudFin ?> <?php echo $longitudFin ?>'
        });

        var directionsDisplay = new google.maps.DirectionsRenderer({
            map: map,
            suppressMarkers: true
        });

        var request = {
            destination: fin,
            origin: inicio,
            travelMode: 'DRIVING'
        };

        var directionsService = new google.maps.DirectionsService();
        directionsService.route(request, function(response, status) {
            if (status == 'OK') {
                // Display the route on the map.
                directionsDisplay.setDirections(response);
            }
        });
    }

   </script>
   <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"
    async defer></script>
  </body>
 </html>

我需要计算TRACER之间的距离和时间，并在INPUT，LABEL等中显示它们。

查看文档：

https://developers.google.com/maps/documentation/distance-matrix/start?hl=es

我使用了这段代码......这带来了一个JSON，但我不知道如何用HTML实现它。

 {
   "destination_addresses" : [ "New York, NY, USA" ],
 "origin_addresses" : [ "Washington, DC, USA" ],
 "rows" : [
    {
       "elements" : [
         {
           "distance" : {
                "text" : "225 mi",
              "value" : 361715
           },
           "duration" : {
              "text" : "3 hours 49 mins",
              "value" : 13725
           },
           "status" : "OK"
           }
        ]
      }
   ],
   "status" : "OK"
}

如何实现此功能以在标签中显示它？

Answer 1

如果我说得对，你试图在网页上显示JSON的一些数据？或直接在地图中（可能有一些API可以这样做）。

如果您只需要阅读JSON并获取数据：

var dataObject = JSON.parse(yourJson)

然后像JS中的常规对象一样使用它。我们假设您需要距离以英里为单位显示：

var distance = dataObject.rows.elements.distance.text

然后把它放在一些HTML元素中（这个绑定取决于你使用的libs和框架，但是vanilla会是这样）

1 - 为您选择的元素添加ID标记，让我们说出它的段落

 <p id="distanceMiles"></p>

2 - 从JSON

解析信息后，将文本设置为JS中的元素

document.getElementById("distanceMiles").innerHTML = distance;

如果您需要直接在地图上使用文字，我从未使用过GM API，但这篇文章解释了它：

how to make overlay GM API v3

Answer 2

Look, with this code shows me distance and time but they are static data, I have two PHP variables of start and end I need to VAR ANSWER be equal to the address of start and end that I pass through PHP variables, since they are never going to be same

如何计算两个跟踪器之间的距离javascript

2 个答案: