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

【问题标题】：Problem getting an array of latitude longitude using polyline to draw a path使用折线绘制路径获取纬度经度数组的问题
【发布时间】：2019-04-16 04:52:02
【问题描述】：

我想通过保存在 SQL Server 数据库中的路点（lat, lng）使用折线绘制路径。当我手动设置航路点时，它可以正常工作并绘制路线，但是当我想从数据库中获取纬度和经度时，它不起作用。我没有收到任何错误只是不起作用，我没有任何点或标记，也没有绘制路径。

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

这是我的视图模型

     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

【问题讨论】：

您可以尝试使用 Postman 调用您的 api 并告诉我们结果吗？
我认为handyCoordinate 可以工作。但是从数据库lat long 不工作
谢谢我的朋友们。我的问题解决了。

标签： javascript jquery asp.net-mvc google-maps polyline

【解决方案1】：

Ajax 调用是异步的，导航器在执行以下代码之前不会等待调用结束。这意味着在初始化折线时，您的“坐标”数组可能为空。

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

【讨论】：

谢谢qwsd。我的问题通过放置异步解决了：false
也许你可以通过展示如何来让你的答案更有用？
当 async 为真时，脚本向服务器发送的请求不会等待回复并继续执行，因此当页面要显示内容时，数组将保持为空。