Нужно пробег и время в пути отображаются вместе - PullRequest
Новая
       10

Нужно пробег и время в пути отображаются вместе

0 голосов
/ 04 октября 2018

Как отобразить пробег и информацию о маршруте?[Код Bing Maps V8] [1] дает отличный пример, но только для одного маршрута, и я работаю с несколькими маршрутами.

Например, когда пользователь выбирает Маршрут1, он видит линию, проведенную между двумя почтовыми индексами, а в нижней части страницы он видит два почтовых индекса и номер маршрута.Это было бы отличное место, чтобы иметь расстояние в милях и время в пути.

Что у меня есть до сих пор: 

<!DOCTYPE html>
<html>

<head>
    <script src="snippet-javascript-console.min.js?v=1"></script>
    <title></title>
    <meta charset="utf-8" />

</head>

<body>
    <div id="myMap" style="position:top;width:1400px;height:600px;"></div>
    <div id="content"></div>
    <div id="content"></div>
    <button id="action">Display route stops</button>
    <script type='text/javascript'>
        var map, directionsManagers = [];
        var boolean1 = true;
        var boolean2 = true;
        var boolean3 = true;
        var boolean4 = true;
        var boolean5 = true;

        // Removes the markers from the map, but keeps them in the array.
        function clearMarkers() {
            setMapOnAll(null);
        }
        function getRoute(Stop0, Stop1, Stop2, Stop3, Stop4, Stop5, Stop6, Stop7, Stop8, Stop9, Stop10, Stop11, Stop12, Stop13, Stop14, Stop15, color, RouteName) {
            var dm = new Microsoft.Maps.Directions.DirectionsManager(map);
            directionsManagers.push(dm);
            dm.setRequestOptions({
                routeMode: Microsoft.Maps.Directions.RouteMode.driving
            });
            dm.setRenderOptions({
                autoUpdateMapView: true,
                drivingPolylineOptions: {
                    strokeColor: color,
                    strokeThickness: 3
                }
            });
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop0 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop1 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop2 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop3 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop4 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop5 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop6 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop7 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop8 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop9 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop10 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop11 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop12 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop13 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop14 }));
            dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop15 }));
            dm.calculateDirections();

        }

        const content = document.getElementById('content');
        // from Route2 tab column X
        const routes = {
            'Route1': ['30344', '30306', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Purple'],
            'Route2': ['30344', '30005', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Lime'],
            'Route3': ['30344', '30030', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Maroon'],
            'Route4': ['30344', '30601', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Navy'],
            'Route5': ['30344', '30096', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Yellow'],
        };
        let selectedRoutes = [];

        for (routeValue in routes) {
            const label = document.createElement('label');
            const input = document.createElement('input');
            const text = document.createTextNode(routeValue);
            input.type = 'checkbox';
            input.value = routeValue;
            input.addEventListener('click', e => {
                if (e.target.checked) {
                    selectedRoutes.push(e.target.value);
                } else {
                    selectedRoutes.splice(selectedRoutes.indexOf(e.target.value), 1);
                }

                boolean1 = boolean2 = boolean3 = boolean4 = boolean5 = false
// from Route2 tab column Y
                for (var i = 0; i < selectedRoutes.length; i++) {
                    if (selectedRoutes[i] == "Route1") {
                        boolean1 = true;
                    }
                    if (selectedRoutes[i] == "Route2") {
                        boolean2 = true;
                    }
                    if (selectedRoutes[i] == "Route3") {
                        boolean3 = true;

                    }
                    if (selectedRoutes[i] == "Route4") {
                        boolean4 = true;
                    }
                    if (selectedRoutes[i] == "Route5") {
                        boolean5 = true;
                    }

                }

                if (selectedRoutes == "" || selectedRoutes == []) {
                    boolean1 = boolean2 = boolean3 = boolean4 = boolean5 = boolean6 = boolean7 = boolean8 = boolean9 = boolean10 = boolean11 = boolean12 = boolean13 = boolean14 = boolean15 = boolean16 = boolean17 = boolean18 = boolean19 = boolean20 = boolean21 = boolean22 = boolean23 = boolean24 = boolean25 = true
                }
            });
            //gets route names
            label.appendChild(input) + "\n";
            //gets checkbox
            label.appendChild(text);
            //puts checkbox together with route name
            content.appendChild(label);
        };

        document.getElementById('action').addEventListener('click', _ => {
            Microsoft.Maps.loadModule('Microsoft.Maps.Directions', _ => {

            console.clear()
                for (routeValue in routes) {
                    // routeValue is not in selectedRoutes, ie route not selected by user
                    if (!selectedRoutes.includes(routeValue)) continue;
                    let myStr = routes[routeValue].concat(routeValue);
                    console.log((""+myStr).replace(/,,/g,""));
                    // add the original route name back in params
                    const params = routes[routeValue].concat(routeValue);
                    // console.log(params)
                    // actually call getRoute
                    getRoute.apply(this, params);
                }
            });
            GetMap()
        });

        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                // center: new Microsoft.Maps.Location(47.7, -122.14),
                zoom: 7
            });
            //Load the directions module.
            Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
                //Generate some routes.
                //Copy information from Route1 tab column X
                if (boolean1 == true) {
                    getRoute('30344', '30306', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Purple', 'Route1');
                }
                if (boolean2 == true) {
                    getRoute('30344', '430005', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Lime', 'Route2');
                }
                if (boolean3 == true) {
                    getRoute('30344', '30030', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Red', 'Route3');
                }
                if (boolean4 == true) {
                    getRoute('30344', '30601', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Navy', 'Route4');
                }
                if (boolean5 == true) {
                    getRoute('30344', '30096', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Yellow', 'Route5');
                }

            });
        }



        function CallRestService(request, callback) {
            if (callback) {
                //Create a unique callback function.
                var uniqueName = getUniqueName();
                request += '&jsonp=' + uniqueName;
                window[uniqueName] = function (response) {
                    callback(response);
                    delete (window[uniqueName]);
                };
                //Make the JSONP request.
                var script = document.createElement("script");
                script.setAttribute("type", "text/javascript");
                script.setAttribute("src", request);
                document.body.appendChild(script);
            }
        }


    </script>

    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=KEY'
        async defer></script>

    <script type="text/javascript">

    </script>

    <div id="tableID" style="position:top; font-family:Arial, Helvetica, sans-serif;font-size:15px;"></div>
</body>

</html>

Но мне нужно, чтобы пробег и время в пути появлялись каждыйвремя выбора маршрута.

...