Question

我想从这个Google距离面板示例中拉出距离公里，并做一些数学函数。

任何人都可以帮忙..

https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel

提前致谢

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Directions Complex</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map_canvas {
        height: 100%;
    }
     @media print {
    html, body {
        height: auto;
    }
    #map_canvas {
        height: 650px;
    }
    }
    #directions-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
    }
    #map-canvas {
        margin-right: 400px;
    }
    #control {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
    }
     @media print {
    #map-canvas {
        height: 500px;
        margin: 0;
    }
    #directions-panel {
        float: none;
        width: auto;
    }
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
                      var directionDisplay;
                      var directionsService = new google.maps.DirectionsService();

                      function initialize() {
                        directionsDisplay = new google.maps.DirectionsRenderer();
                        var mapOptions = {
                          zoom: 7,
                          mapTypeId: google.maps.MapTypeId.ROADMAP,
                          center: new google.maps.LatLng(41.850033, -87.6500523)
                        };
                        var map = new google.maps.Map(document.getElementById('map_canvas'),
                            mapOptions);
                        directionsDisplay.setMap(map);
                        directionsDisplay.setPanel(document.getElementById('directions-panel'));

                        var control = document.getElementById('control');
                        control.style.display = 'block';
                        map.controls[google.maps.ControlPosition.TOP].push(control);
                      }

                      function calcRoute() {
                        var start = document.getElementById('start').value;
                        var end = document.getElementById('end').value;
                        var request = {
                          origin: start,
                          destination: end,
                          travelMode: google.maps.DirectionsTravelMode.DRIVING
                        };
                        directionsService.route(request, function(response, status) {
                          if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response);
                          }
                        });
                      }

                      google.maps.event.addDomListener(window, 'load', initialize);
                    </script>
    </head>
    <body>
    <div id="control"> <strong>Start:</strong>
      <select id="start" onChange="calcRoute();">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
      </select>
      <strong>End:</strong>
      <select id="end" onChange="calcRoute();">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
      </select>
    </div>
    <div id="directions-panel"></div>
    <div id="map_canvas"></div>
    </body>
    </html>

Answer 1

小组的内容是DirectionsResult

的代表

DirectionsResult由路线，腿和步骤组成。腿和步骤有一个距离属性，包含你想要的东西。

要强制以km为单位返回距离，请使用DirectionRequest的unitSystem-option：

unitSystem:google.maps.UnitSystem.METRIC

Answer 2

您使用的方法并不能准确地给出两点之间的距离。谷歌地图有一种方法可以返回两点之间的道路距离。

编辑此方法并使用Google API

进行尝试

function calcRoute（）{

    var start = document.getElementById("PickupDestination").value;
    var end = document.getElementById("DropoffDestination").value;
    var distanceInput = document.getElementById("Kilometres");

    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionDisplay.setDirections(response);
            distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
        }

    });
}

从谷歌距离面板api v3获取距离

2 个答案: