Проблема получения массива широты и долготы с использованием полилинии для рисования пути - PullRequest
0 голосов
/ 13 ноября 2018

Я хочу нарисовать путь с помощью полилинии путевыми точками ( lat, lng ), сохраненными в базе данных сервера sql. Когда я устанавливаю путевые точки вручную, он отлично работает и рисует маршрут, но когда я хочу получить широту и из базы данных она не работает полностью запутался в этом. Вот мой код.

    <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 handyCoordinate = [
    //    { lat: 35.12394860000, lng: 50.95550740000 },
    //    { lat: 35.12470560000, lng: 50.95666690000 },
    //    { lat: 35.12550200000, lng: 50.95783140000 },
    //    { lat: 35.12628050000, lng: 50.95889470000}
    //];
    //console.log(handyCoordinates);

    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({
            //icon: {
            //url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
            //size: new google.maps.Size(7, 7),
            //anchor: new google.maps.Point(4, 4)
            //},
            position: polyline.getPath().getAt(i),
            title: polyline.getPath().getAt(i).toUrlValue(6),
            map: map,


        });
    }

    polyline.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);

А вот мой контроллер в остальной части моего проекта MVC

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

моя таблица базы данных моя таблица базы данных

1 Ответ

0 голосов
/ 13 ноября 2018

Ajax-вызовы являются асинхронными, и навигатор не будет ждать окончания вызова до выполнения следующего кода.Это означает, что ваш массив «Координаты» может быть пустым при инициализации полилинии.

Вы можете попробовать использовать async / await для решения вашей проблемы или переместить оставшуюся часть кода в методе успешного вызова какхорошо.

...