Question

我想实现一个表单，您可以在其中输入原点和目的地，然后使用google maps javascript API，它会显示原点和目标值更改的距离。下面是我的代码，我能够使用maps API获取地址，但是它检查填写表单以计算距离的部分不起作用，我认为问题出在第87行 - ＆gt; $（'＃quota_form'）。on（'input'，dispdist）这是我的代码，请告诉我如何解决第87行

<!DOCTYPE html>
<html>
<!-- head start -->
<head>
    <!-- styles -->
    <style>
        .top_margin {
            margin-top: 10px;
        }

        .border {
            border-style: inset inset inset inset;
        }
    </style >
    <!-- Scripts -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB03tJHy5QUZ_L3bjn3ehSkFE5QVrcSlLo&libraries=places"></script>

    <script>
        /* When the document gets ready */
        $(document).ready (
            function initialize() {
                /* Variables */
                var origin_input = ''
                var destination_input = ''
                var prices = {
                    "choice 1": 10,
                    "choice 2": 20,
                    "choice 3": 30,
                    "choice 4": 40,
                    "choice 5":50,
                    "choice 6":60
                };
                var distance_service = new google.maps.DistanceMatrixService();
                var route = {
                    origins: [],
                    destinations: [],
                    travelMode: 'DRIVING',
                    avoidHighways: false,
                    unitSystem: google.maps.UnitSystem.IMPERIAL
                }
                /* Variables */

                /* Functions */
                // Distance parser
                function getorigin() {
                    origin_input = autocomplete_origin.getPlace().formatted_address;
                }
                function getdestination() {
                    destination_input = autocomplete_destination.getPlace().formatted_address;
                }
                function parse_distance(response, status) {
                    if (status == 'OK') {
                        var origins = response.originAddresses;
                        var destinations = response.destinationAddresses;
                        for (var i = 0; i < origins.length; i++) {
                            var results = response.rows[i].elements;
                            for (var j = 0; j < results.length; j++) {
                                var element = results[j];
                                var dist = element.distance.text;
                                var duration = element.duration.text;
                                var from = origins[i];
                                var to = destinations[j];
                            }
                        }
                        $('#distance').text(dist);
                    }
                }
                function dispdist() {
                    /* distance calculation */
                    route.origins.push(origin_input);
                    route.destinations.push(destination_input);
                    distance_service.getDistanceMatrix (route, parse_distance);
                }
                /* Functions */

                /* addresses auto complete initialization */
                autocomplete_origin = new google.maps.places.Autocomplete(document.getElementById('origin'));
                autocomplete_destination = new google.maps.places.Autocomplete(document.getElementById('destination'));
                autocomplete_origin.addListener('place_changed', getorigin);
                autocomplete_destination.addListener('place_changed', getdestination);

                /* display distance */
                $('#quota_form').on('input', dispdist)
            });

    </script>
</head>
<!-- head end -->

<!--------------------------------------------------------------------------------------------------------------------->

<!-- body start -->
<body>

<div class="container-fluid top_margin">
    <form id="quota_form">
        <!-- Origin input -->
        <div id="q" class="form-group">
            <label for="origin">Origin</label>
            <input id="origin" type="text" class="form-control" placeholder="Enter origin address">
        </div>

        <!-- Destination input -->
        <div class="form-group">
            <label for="destination">Destination</label>
            <input id="destination" type="text" class="form-control" placeholder="Enter destination address">
        </div>

        <div class="form-group">
            <!-- Distance output -->
            <label>Distance</label>
            <output id="distance" form="quota_form" class="border" for="origin destination">Distance Determination</output>
        </div>

        <!-- Package size choice -->
        <label>Package size</label>
        <div class="form-group">
            <div id="packageSize" class = "btn-group">
                <button type = "button" class = "btn btn-default">choice 1</button>
                <button type = "button" class = "btn btn-default">choice 2</button>
                <button type = "button" class = "btn btn-default">choice 3</button>
                <button type = "button" class = "btn btn-default">choice 4</button>
                <button type = "button" class = "btn btn-default">choice 5</button>
                <button type = "button" class = "btn btn-default">choice 6</button>
            </div>
        </div>

        <!-- Quota Output -->
        <div class="form-group">
            <label>Quota</label>
            <output id="quota" form="quota_form" class="border" for="distance packageSize">Quota Determination</output>
        </div>

    </form>
</div>

</body>
<!-- body end -->
</html>

路线的动态距离计算

0 个答案: