Google maps api 3 从google distance panel api v3获取距离_Google Maps Api 3_Distance

Google maps api 3 从google distance panel api v3获取距离

google-maps-api-3

Google maps api 3 从google distance panel api v3获取距离,google-maps-api-3,distance,Google Maps Api 3,Distance,我想从这个Google distance panel示例中提取以公里为单位的距离，然后做一些数学函数谁能帮忙吗提前谢谢 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title&g

我想从这个Google distance 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>


谷歌地图JavaScript API v3示例：方向复杂
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图画布{
身高：100%；
}
@媒体印刷品{
html，正文{
高度：自动；
}
#地图画布{
高度：650px；
}
}
#方向面板{
身高：100%；
浮动：对；
宽度：390px；
溢出：自动；
}
#地图画布{
右边距：400px；
}
#控制{
背景：#fff；
填充物：5px；
字体大小：14px；
字体系列：Arial；
边框：1px实心#ccc；
盒影：0 2px2pRGBA（33,33,33,0.4）；
显示：无；
}
@媒体印刷品{
#地图画布{
高度：500px；
保证金：0；
}
#方向面板{
浮动：无；
宽度：自动；
}
}
方向显示；
var directionsService=new google.maps.directionsService（）；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
变量映射选项={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：新google.maps.LatLng（41.850033，-87.6500523）
};
var map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
方向显示.setMap（地图）；
directions display.setPanel（document.getElementById（'directions-panel'）；
var control=document.getElementById（'control'）；
control.style.display='block'；
控件[google.maps.ControlPosition.TOP].push（控件）；
}
函数calcRoute（）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
开始：
芝加哥
圣路易斯
密苏里州乔普林
俄克拉荷马城
阿马里洛
盖洛普
亚利桑那州弗拉格斯塔夫
维诺娜
金门
巴斯托
圣贝纳迪诺
洛杉矶
结束：
芝加哥
圣路易斯
密苏里州乔普林
俄克拉荷马城
阿马里洛
盖洛普
亚利桑那州弗拉格斯塔夫
维诺娜
金门
巴斯托
圣贝纳迪诺
洛杉矶

面板的内容是

方向结果由路线、支腿和台阶组成。腿和台阶具有“距离”属性，其中包含所需的距离

要强制以公里为单位返回距离，请使用DirectionRequest的：

unitSystem:google.maps.UnitSystem.METRIC

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

编辑此方法并使用Google api进行尝试

函数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;
        }

    });
}