Question

目前我能够从源到目的地获取所有纬度和经度。

但有了这个，我只能得到一条路。

Now i want the option to select 1 route path from the different route path from source to destination place。

我还希望将所有lat和lon存储到我的数据库中。

Database structure :

Rid Lat Lon

我正在使用asp.net c＃技术..

How can i get the option for select path and according to that path need to get all the lat and lon.

并且所有lat和lon都需要使用c＃代码存储在我的数据库中。

我该如何执行此任务？

我正在使用下面的代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
        html, body, #map-canvas {
            height: 100%;
            min-height: 600px;
            min-width: 700px;
            margin: 0px;
            padding: 0px;
        }

        #map-canvas {
            height: 50%;
        }

        #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
    <div id="panel">
        <label>
            Origin
          <input id="origin" type="text" value="">
        </label>
        <label>
            Destination
          <input id="destination" type="text" value="">
        </label>
        <input type="button" value="GetDirections" onclick="calcRoute()">
    </div>
    <div id="map-canvas"></div>
    <div id="vertex-container">
        <label>Points</label>
        <ul id="vertex">
        </ul>
    </div>
    <script type="text/javascript">
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();

            var mapOptions = {
                zoom: 7,
                center: new google.maps.LatLng(25.5911, 86.1611)
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            directionsDisplay.setMap(map);
        }

        function calcRoute() {
            var start = document.getElementById('origin').value;
            var end = document.getElementById('destination').value;
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            };
            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;
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</body>
</html>

Answer 1

要让Google Maps向您发送几个选项，您必须构建google.maps.DirectionsRequest对象，将provideRouteAlternatives属性设置为true，如下所示：

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

然后google.maps.DirectionsResult对象返回routes Array.<DirectionsRoute>，其中DirectionsRoute包含多个provideRouteAlternatives个对象（当设置false时，它通常只包含一个对象到var routes = response.routes;）。

所以从你正在使用的代码：

routes

directionsDisplay.setDirections(response)将有几个要迭代的元素。那里有几条路。

现在，当您执行此操作0时，Google地图只会绘制数组routes的索引routeIndex中的路径。要让Google地图绘制另一条路径，您可以指定传递给google.maps.DirectionsRendererOptions构造函数的google.maps.DirectionsRenderer对象的DirectionsRenderer属性。

类似的东西会绘制所有路径（你需要几个var routes = response.routes; for (var j = 0; j < routes.length; j++) { var directionsDisplay = new google.maps.DirectionsRenderer({ map: map, directions: response, routeIndex: j }); directionsDisplays.push(directionsDisplay); 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); } }个对象）：

Polylines

如果您希望DirectionsRendererOptions颜色不同，您也可以在<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Geocoding service</title> <style> html, body, #map-canvas { height: 100%; min-height: 600px; min-width: 700px; margin: 0px; padding: 0px } #map-canvas { height: 50%; } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> </head> <body> <div id="panel"> <label>Origin <input id="origin" type="text" value=""> </label> <label>Destination <input id="destination" type="text" value=""> </label> <input type="button" value="GetDirections" onclick="calcRoute()"> </div> <div id="map-canvas"></div> <div id="vertex-container"> <label>Points</label> <ul id="vertex"> </ul> </div> <script type="text/javascript"> var directionsDisplays = []; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { var mapOptions = { zoom: 7, center: new google.maps.LatLng(48.85727000, 2.35238) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } function calcRoute() { var start = document.getElementById('origin').value; var end = document.getElementById('destination').value; var request = { origin: start, destination: end, provideRouteAlternatives: true, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { if (response.routes && response.routes.length > 0) { var routes = response.routes; for (var j = 0; j < routes.length; j++) { var directionsDisplay = new google.maps.DirectionsRenderer({ map: map, directions: response, routeIndex: j }); directionsDisplays.push(directionsDisplay); 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; } google.maps.event.addDomListener(window, 'load', initialize); </script> </body> </html>对象中进行设置。

整个代码将是这样的：

{{1}}

如何从不同的路线获取从源地到目的地的所有纬度和经度

1 个答案: