0

我想从这个谷歌距离面板示例中提取以公里为单位的距离并做一些数学函数。

任何人都可以请帮助..

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>
4

2 回答 2

0

面板的内容是DirectionsResult的表示

DirectionsResult 由路线、路段和步骤组成。腿和台阶具有距离属性，其中包含您想要的内容。

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

unitSystem:google.maps.UnitSystem.METRIC
于 2012-09-23T11:48:22.577 回答
0

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

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

函数计算路由（）{

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

    });
}
于 2015-07-30T07:30:22.910 回答