0

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

2 に答える 2

0

使用している方法では、2 点間の距離が正確に得られません。Google マップには、2 点間の道路距離を返すメソッドがあります。

このメソッドを編集して、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;
        }

    });
}
于 2015-07-30T07:30:22.910 に答える
0

パネルのコンテンツは、DirectionsResultの表現です

DirectionsResult は、ルート、区間、およびステップで構成されます。脚とステップには、必要なものを含む距離プロパティがあります。

距離を強制的に km単位で返すには、DirectionRequestのunitSystem-optionを使用します。

unitSystem:google.maps.UnitSystem.METRIC
于 2012-09-23T11:48:22.577 に答える