Javascript 如何从不同路线获得从源地到目的地的所有纬度和经度_Javascript_C#_Asp.net_Google Maps

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

javascript c# asp.net google-maps

Javascript 如何从不同路线获得从源地到目的地的所有纬度和经度,javascript,c#,asp.net,google-maps,Javascript,C#,Asp.net,Google Maps,目前，我能够从源位置到目标位置获取所有lat和lon 但是有了这个，我只能得到一条路径现在，我想要一个选项，从不同的路由路径中选择一条路由路径，从源位置到目标位置我还想把所有的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

目前，我能够从源位置到目标位置获取所有lat和lon

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

现在，我想要一个选项，从不同的路由路径中选择一条路由路径，从源位置到目标位置

我还想把所有的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代码存储在我的数据库中

如何执行此任务

我使用的是belowe代码：

<!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>

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

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

<!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>

然后google.maps.DirectionsResultobject返回一个数组路由。对于多个DirectionRoute对象，当ProviderRouteAlternative设置为false时，它通常只包含一个对象

因此，根据您使用的代码：

var-routes=response.routes

路由将有几个元素需要迭代。这里有好几条路

现在，当您执行此操作时，directionsDisplay.setDirectionsresponse google maps将仅在数组路由的索引0中绘制路由。要让Google Maps绘制另一条路径，必须指定传递给Google.Maps.DirectionsRenderOptions构造函数的Google.Maps.DirectionsRenderOptions对象的routeIndex属性

类似的内容将绘制所有需要几个方向的路径渲染器对象：

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);
    }
}

你读了吗？但是我怎样才能把lat和lon添加到数据库中呢？我回答了第一个问题，对于第二个问题，你考虑过使用jQuery吗？谢谢。我已经尝试过ajax，并开发了该文件的webmethod类，但它会给我空值。下面的答案给出了给你想要发送到服务器的对象的逻辑，我建议你是一个普通对象，而不是Google Maps对象。类似这样的东西：`[{lat:1.223，lng:2.122312}，{lat:1.545435，lng:2.54354343}]。当你得到答案后，再发一个你知道的问题，一个问题，一个帖子；在这里，我得到了所有的路径，但是我如何才能选择任何一条路径，而只选择路径lat和lon呢？就像这个var directionsDisplay=new google.maps.DirectionsRenderer{map:map，directions:response，routeIndex:j}；您可以通过传递reoutIndex来选择所需的路径。因此，如果路线有2条路径，您通过1，您将选择并绘制第二条路径路线，但我无法在地图上选择任何路径，并且您需要掌握所有这些，以便选择一条多段线，该多段线基本上是侦听单击事件并更改颜色，或者您希望在多段线的单击事件处理程序上单击…确定，谢谢。。您能告诉我如何将这些存储在数据库中吗？