Question

我想获取原点到目的地之间的所有纬度和经度。

为此，我写了下面的剧本，但它不会给我这两个地方之间的纬度和经度。

   <script type="text/javascript">
        var directionDisplay;
        var directionsRenderer;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function drawMap(midpoint) {
            var mid = midpoint.split(",");
            var start = new google.maps.LatLng(mid[0], mid[1]);
            var myOptions = {
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: start,
                mapTypeControl: false
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var input = (document.getElementById('origin'));

            var inputdestination = (document.getElementById('destination'));

            var types = document.getElementById('changetype-all');
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);

            var autocompletedestination = new google.maps.places.Autocomplete(inputdestination);
            autocompletedestination.bindTo('bounds', map);
        }

        function getRendererOptions(main_route) {
            if (main_route) {
                var _colour = '#00458E';
                var _strokeWeight = 4;
                var _strokeOpacity = 1.0;
                var _suppressMarkers = false;
            }
            else {
                var _colour = '#ED1C24';
                var _strokeWeight = 2;
                var _strokeOpacity = 0.7;
                var _suppressMarkers = false;
            }

            var polylineOptions = { strokeColor: _colour, strokeWeight: _strokeWeight, strokeOpacity: _strokeOpacity };

            var rendererOptions = { draggable: true, suppressMarkers: _suppressMarkers, polylineOptions: polylineOptions };

            return rendererOptions;
        }

        function renderDirections(result, rendererOptions, routeToDisplay) {


            if (routeToDisplay == 0) {
                var _colour = '#00458E';
                var _strokeWeight = 4;
                var _strokeOpacity = 1.0;
                var _suppressMarkers = false;
            }
            else {
                var _colour = '#ED1C24';
                var _strokeWeight = 4;
                var _strokeOpacity = 0.7;
                var _suppressMarkers = false;
            }

            // if (routeToDisplay == 0) _colour = "#FF0000";


            // create new renderer object
            var directionsRenderer = new google.maps.DirectionsRenderer({
                draggable: true,
                suppressMarkers: _suppressMarkers,
                polylineOptions: {
                    strokeColor: _colour,
                    strokeWeight: _strokeWeight,
                    strokeOpacity: _strokeOpacity
                }
            });
            directionsRenderer.setMap(map);
            directionsRenderer.setPanel(document.getElementById('directions_panel'));
            directionsRenderer.setDirections(result);
            directionsRenderer.setRouteIndex(routeToDisplay);

            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);

如果条件用于获取两个地方之间的所有纬度和经度，则下面但不是吵闹。

                    if (response.routes && response.routes.length > 0) {
                        var routes = response.routes;
                        for (var j = 0; j < routes.length; j++) {
                            var points = routes[j].overview_path;
                            var ul = document.getElementById("vertex");
                            for (var i = 0; i < points.length; i++) {
                                var li = document.createElement('li');
                                li.innerHTML = getLiText(points[i]);
                                ul.appendChild(li);
                            }
                        }
                    }
                }
            });
        }
        function getLiText(point) {
            var lat = point.lat(),
                lng = point.lng();
            return "lat: " + lat + " lng: " + lng;
        }
        function requestDirections(start, end, routeToDisplay, main_route) {

            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                provideRouteAlternatives: main_route
            };


            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    if (main_route) {
                        var rendererOptions = getRendererOptions(true);
                        for (var i = 0; i < result.routes.length; i++) {
                            renderDirections(result, rendererOptions, i);
                        }
                    }
                    else {
                        var rendererOptions = getRendererOptions(false);
                        renderDirections(result, rendererOptions, routeToDisplay);

                    }
                }
            });
        }
    </script>

以下是身体：

<body>
    <div id="vertex-container">
        <label>Points</label>
        <ul id="vertex">
        </ul>
    </div>

    <div>
    //...all the other input and button
    //....
</body>

从上面的脚本我可以得到从原点到目的地的所有路线，但我没有得到那些地方之间的all latitude and longitude。

enter image description here

你可以看到我可以在两个地方之间获得建议路线。

但是现在我想在我选择的路线之间打印所有纬度和经度。

假设这里有3条路线。

now suppose i am selecting 1st then it will fetch all the latitude and longitude between those places only for that route

Now suppose i am slecting 2nd suggested route then it will display all latitude and longitude between that route

现在，

how can i get all the latitude and longitude between those places for selected route from suggested routes?

Answer 1

您必须遍历备用路线，并且每个路线都要循环完成所有步骤。

这是一个示例，显示如何将所有备用路线绘制到地图并在每个步骤放置标记。我使用了不同的颜色，因此您可以清楚地识别每条路线。

请注意，它使用每个步骤的start_location。我们不知道这是否是您所需要的。

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {

    directionsDisplay = new google.maps.DirectionsRenderer();
    var center = new google.maps.LatLng(0, 0);
    var myOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: center
    }

    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    directionsDisplay.setMap(map);

    var start = "Yamuna Nagar, Haryana, India";
    var end = "New Delhi, India";
    var method = 'DRIVING';
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode[method],
        provideRouteAlternatives: true
    };

    directionsService.route(request, function (response, status) {

        if (status == google.maps.DirectionsStatus.OK) {

            var routesSteps = [];
            var routes = response.routes;
            var colors = ['red', 'green', 'blue', 'orange', 'yellow', 'black'];

            for (var i = 0; i < routes.length; i++) {

                new google.maps.DirectionsRenderer({
                    map: map,
                    directions: response,
                    routeIndex: i,
                    polylineOptions: {

                        strokeColor: colors[i],
                        strokeWeight: 4,
                        strokeOpacity: .3
                    }
                });

                var steps = routes[i].legs[0].steps;
                var stepsCoords = [];

                for (var j = 0; j < steps.length; j++) {

                    stepsCoords[j] = new google.maps.LatLng(steps[j].start_location.lat(), steps[j].start_location.lng());

                    new google.maps.Marker({
                        position: stepsCoords[j],
                        map: map,
                        icon: {
                            path: 'M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0',
                            scale: .5,
                            fillColor: colors[i],
                            fillOpacity: .3,
                            strokeWeight: 0
                        },
                        title: steps[j].maneuver
                    });
                }

                routesSteps[i] = stepsCoords;
            }

            // Here is your array of routes steps coordinates
            console.log('routesSteps', routesSteps);
        }
    });
}

initialize();

JSFiddle demo

如何在选择建议路线时从源到目的地获取所有纬度和经度

1 个答案: