Question

我正在尝试在Google地图上显示订单的实时跟踪。在第一次API点击时，我获得了所有跟踪数据，并在谷歌地图上成功绘制。

现在我想定期调用API（10秒）并获取lat-long的新数据，并在谷歌地图中添加唯一新接收的lat-long。

就像每10秒一次的地图会更新并显示最新的位置状态 - 就像实时跟踪一样。

这是我的JavaScript代码：

<script type="text/javascript">

    var latlongs = [];
    var orderID = "ASDF1234";


    $(document).ready(function () {
        $.ajax({
            url: 'http://api.xyz.com/api/Order/PostOrderDetails',
            dataType: "json",
            method: 'post',
            data: JSON.stringify({ order_id: orderID }),
            contentType: "application/json; charset=utf-8",
            success: function (data) {

                $(data.data.latLong).each(function (index, orderData) {                    
                    var mylatlongs = new google.maps.LatLng(orderData.latitude, orderData.longitude);
                    latlongs.push(mylatlongs);
                });

                newlatlongsLength = latlongs.length;
                oldlatlongsLength = latlongs.length;


                var mapProp = {
                    zoom: 20,
                    center: latlongs[latlongs.length - 1],
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById('google-map-div'), mapProp);

                var trackPath = new google.maps.Polyline({
                    path: latlongs,
                    icons: [{
                        icon: {
                            path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
                        },
                        repeat: '175px'
                    }],
                    geodesic: true,
                    strokeColor: '#FF0000',
                    strokeOpacity: 1.0,
                    strokeWeight: 2
                });
                trackPath.setMap(map);
            },
            error: function (err) {
                alert(err);
            }
        });          
    });
</script>

这是我的HTML代码：

<div class="row">
    <div class="col-md-12">
        <div id="google-map-div" style="height: 480px;">
        </div>
    </div>
</div>

那我怎么能每10秒调用一次API并在谷歌地图上绘制更新lat-long？

Answer 1

您可以使用SetInterval对于此方案

首先为您的行动创建功能。然后你可以在setinterval调用这个函数..

      setInterval(function() {
        $.ajax({
        url: 'http://api.xyz.com/api/Order/PostOrderDetails',
        dataType: "json",
        method: 'post',
        data: JSON.stringify({ order_id: orderID }),
        contentType: "application/json; charset=utf-8",
        success: function (data) {

            $(data.data.latLong).each(function (index, orderData) {                    
                var mylatlongs = new google.maps.LatLng(orderData.latitude, orderData.longitude);
                latlongs.push(mylatlongs);
            });

            newlatlongsLength = latlongs.length;
            oldlatlongsLength = latlongs.length;


            var mapProp = {
                zoom: 20,
                center: latlongs[latlongs.length - 1],
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('google-map-div'), mapProp);

            var trackPath = new google.maps.Polyline({
                path: latlongs,
                icons: [{
                    icon: {
                        path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
                    },
                    repeat: '175px'
                }],
                geodesic: true,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            trackPath.setMap(map);
        },
        error: function (err) {
            alert(err);
        }
    });   },10000);

Answer 2

假设您的API会为您提供每次通话的完整路径并且它不会改变以前的点数，您可以抓住缺失的点并通过trackPath.getPath().push将它们添加到路径中。像

这样的东西

var mapProp = {
    zoom: 20,
    center: latlongs[latlongs.length - 1],
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
    document.getElementById('google-map-div'), 
    mapProp
);

var trackPath = new google.maps.Polyline({
    icons: [{
        icon: {
            path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
        },
        repeat: '175px'
    }],
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});
trackPath.setMap(map);

function update() {
    $.ajax({
        url: 'http://api.xyz.com/api/Order/PostOrderDetails',
        dataType: "json",
        method: 'post',
        data: JSON.stringify({ order_id: orderID }),
        contentType: "application/json; charset=utf-8"
    }).then(function(data) {
        var path = trackPath.getPath(), 
            coords = data.data.latLong;

        // restrict the coordinates to the new values
        coords = coords.slice(path.getLength());

        // add each point to the path
        coords.forEach(function (od) {
            var point = new google.maps.LatLng(od.latitude, od.longitude);
            path.push(point);
        });

        // sets a timer to update the points in 10 seconds
        setTimeout(update, 10000);
    });
}
update();

请注意，创建的折线没有任何路径，并且在第一次调用update时填充。

有关添加到路径的点的示例，请参阅https://developers.google.com/maps/documentation/javascript/examples/polyline-complex。

在谷歌地图上添加新的纬度经度，如实时追踪

2 个答案: