javascript - 如何获取从源地到目的地的所有纬度和经度

标签 javascript c# asp.net google-maps

我想从谷歌地图获取所有纬度和经度。

例如:假设我输入了源地和目的地的纬度和经度,并且路径在 map 上绘制如下:

enter image description here

所以现在我想要这个 A 源和 B 目的地之间的所有经纬度。所有纬度和经度都必须存储在数据库中。

因此,当我跟踪我的汽车并且该汽车没有在该路径/方式上移动时,它将触发一些操作,例如向我发送电子邮件等。

我正在使用 ASP.NET C# 进行开发。

那么我怎样才能获得所有的纬度和经度?

我正在使用下面的脚本

  <script>
        function initialize() {
            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 8,
                center: new google.maps.LatLng(22.304634, 73.161070),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }),
       directions = new google.maps.DirectionsService(),
       displayer = new google.maps.DirectionsRenderer({
            draggable: true
        });

            displayer.setMap(map);
            directions.route({
                origin: new google.maps.LatLng(22.304634, 73.161070),
                destination: new google.maps.LatLng(23.022242, 72.548844),
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function (result) {
                displayer.setDirections(result);
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        google.maps.event.addListener(displayer, 'directions_changed', some_method);
    </script>

最佳答案

您必须循环访问 google.maps.DirectionsRoute 对象的 overview_path 属性。然后创建您的对象(或只是序列化 overview_path)以将其发送到服务器并将其存储在数据库中。

查看此示例以了解如何循环overview_path:

<!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(48.85727000, 2.35238)
            };
            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>

关于javascript - 如何获取从源地到目的地的所有纬度和经度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27606055/

相关文章:

javascript - jquery 操作触发一次,但不会再次触发

javascript - Angular 动画 : on click

javascript - 要删除所有listItem,只需按一下按钮

c# - 服务定位器模式和 DDD

c# - 无法在WPF MVVM应用程序中找到xaml页面

javascript - 使自动完成功能适用于下拉列表,并让它填充另一个下拉列表的内容

javascript - 对象数组减少 typescript 错误: not assignable to parameter of type 'never'

c# - 从 wpf 中的数组裁剪图像时出现问题

asp.net - 在 UpdatePanel 中使用 GridView 时数据不同步

如果按下取消,Javascript 确认不会停止回发请求?