使用折线绘制路径获取经纬度数组的问题

Question

我想使用 waypoints (lat, lng) 保存在 SQL 服务器数据库中的折线来绘制一条路径。当我手动设置 waypoints 时，它工作正常并绘制了一条路线，但是当我想从数据库中获取纬度和经度时，它不起作用。我没有收到任何类型的错误，只是不起作用，我没有任何点或标记，也没有绘制路径。

<html>
    <head>
       <meta charset="UTF-8" />
       <script src="http://maps.google.com/maps/api/js?sensor=false" 
       type="text/javascript"></script>
       <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    </head>

    <body>
      <div id="map" style="width:1200px; height: 600px;"></div>
    </body>
</html>



  <script>  
    function initialize() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(31.909786, 54.365912),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'),
            mapOptions);

        var Coordinates = [];
        $.ajax({
            url: '/Home/GetPath',
            type: 'Post',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $.each(data, function (index, value) {
                    Coordinates.push(new google.maps.LatLng(value.lat, value.lng));
                });

            },
            error: function () {
            }
        });

        var polyline = new google.maps.Polyline({
            path: Coordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        for (var i = 0; i < polyline.getPath().getLength(); i++) {
            var marker = new google.maps.Marker({
                position: polyline.getPath().getAt(i),
                title: polyline.getPath().getAt(i).toUrlValue(6),
                map: map      
            });
        }
        polyline.setMap(map);
    }

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

这是我控制器中的操作

    [HttpPost]
    public JsonResult GetPath()
    {
         var q = TrackDb.TestTrackingTable_
            .Where(x => x.DoccNo == 4844)
            .Select(s => new
            {
                lat = s.latitude,
                lng = s.longitude
            })
            .ToList();

这是我的 ViewModel

     public class TrackHisViewModel
{
    public int Id { get; set; }

    public int PointStep { get; set; }

    public int DoccNo { get; set; }

    public decimal  Longitude { get; set; }

    public decimal Latitude { get; set; }
}

my database table my database table

Answer 1

Ajax 调用是异步的，导航器不会等待调用结束后再执行以下代码。这意味着初始化折线时您的 'Coordinates' 数组可能为空。

您可以尝试使用 async/await 来解决您的问题，或者将其余代码也移到调用的成功方法中。

使用折线绘制路径获取经纬度数组的问题

Problem getting an array of latitude longitude using polyline to draw a path

javascript

jquery

asp.net-mvc

google-maps

polyline