javascript - 如何使用ajax实时更新标记

Question

如果位置值已更改，我可以知道如何实时更新位置。当前代码是我用来从数据库中检索数据的代码。我尝试了许多解决方案，例如设置间隔或超时，但这并没有帮助我解决问题。

$.ajax({

    type: "GET",
    url: ')',

    success: function (data, status, xhr) {

        for (var i = 0; i < data.Table.length; i++) {

            if (createdA === false) {

                for (var a = 0; a <= 200; a++) {

                    a1 = data.Table[i].Latitude;
                    a2 = data.Table[i].Longitude;
                    a5 = data.Table[i].DeviceImei;
                }
                createMarkerA([a1, a2]);
                shownA = true;
                createdA = true;
                setInterval(groupOne(), 10000);
            }
            else if (shownA === false) {
                for (var a3 = 0; a3 < 200; a3++) {
                    showMarker(markersA[a3]);
                    shownA = true;
                }

            }
            else if (shownA === true) {
                for (var a4 = 0; a4 < 200; a4++) {
                    hideMarker(markersA[a4]);
                    shownA = false;
                }

            }

        }

    },

    error: function (xhr) {

        alert(xhr.responseText);

    }

});

//这是初始化地图的代码

 //centers the map at using the 2 points as reference
    var center = L.bounds([, ], [, ]).getCenter();

    //it sets the map to the pre-defined div container
    var map = L.map('test_map').setView([center.x, center.y], 12);

    var basemap = L.tileLayer('https://maps-{s}.onemap.sg/v3/Original/{z}/{x}/{y}.png', {
        detectRetina: true,
        maxZoom: 20,
        minZoom: 11
    });
    basemap.addTo(map);

    var markersLayer = new L.LayerGroup();  //layer contain searched elements

    map.addLayer(markersLayer);
    var controlSearch = new L.Control.Search({
        position: 'topright',
        layer: markersLayer,
        initial: false,
        zoom: 18,
        marker: false
    })
    map.addControl(controlSearch);



    L.circle([, ], 50, { color: '#DA2E2E', opacity: 2, fillColor: 'blue', fillOpacity: .3 }).bindPopup('').addTo(map);
    L.circle([, ], 50, { color: '#DA2E2E', opacity: 2, fillColor: 'blue', fillOpacity: .3 }).bindPopup('').addTo(map);

// 初始化标记的代码

var markers = [];

function pushMarker(marker) {
 markers.push(marker);
 }

function createMarker(data) {
 var marker = new L.marker([data[0], data[1]]);
 pushMarker(marker);
 showMarker(marker);
 }

 //General Functions
 function hideMarker(marker) {
 map.removeLayer(marker);
  }

 function showMarker(marker) {
 map.addLayer(marker);
   }

   var createdA = false;
   var shownA = false;
   var markersA = [];

   var a1;
   var a2;
   var a5;



     function createMarkerA(data) {

      $.ajax({

    type: "GET",

    url: '',


    success: function (data, status, xhr) {


        for (var i = 0; i < 4; i++) {





            var customPopup = 'Coordinates X: ' + data.Table[i].Latitude + '</br>Coordinates Z: ' + data.Table[i].Longitude + '</br>Station: ' + data.Table[i].Station + ' </br> Box: ' + data.Table[i].Box + '</br > Timestamp: ' + data.Table[i].LocationSend;
            var customOptions =
            {
                'maxWidth': '500',
                'className': 'custom'
            };
            var marker = L.marker(new L.LatLng(data.Table[i].Latitude, data.Table[i].Longitude, data.Table[i].Station));
            marker.bindPopup(customPopup, customOptions);
            pushMarker(marker);
            showMarker(marker);


        }

    },


    error: function (xhr) {

        alert(xhr.responseText);

    }



});

  }
  function groupOne() {

$.ajax({


    type: "GET",
    url: '',


    success: function (data, status, xhr) {

        for (var i = 0; i < 4; i++) {

            if (createdA === false) {

                for (var a = 0; a < 200; a++) {

                    a1 = data.Table[i].Latitude;
                    a2 = data.Table[i].Longitude;
                }
                createMarkerA([a1, a2]);
                shownA = true;
                createdA = true;

            }
            else if (shownA === false) {
                for (var a3 = 0; a3 <= 4; a3++) {
                    showMarker(markersA[a3]);
                    shownA = true;
                }

            }
            else if (shownA === true) {
                for (var a4 = 0; a4 <= 4; a4++) {
                    hideMarker(markersA[a4]);
                    shownA = false;
                }

            }





        }


    },




    error: function (xhr) {

        alert(xhr.responseText);

    }




});

标签： javascriptleaflet

Answer 1

 <html>
 <head>
<title>Leaflet geolocate example</title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
<link rel="stylesheet" href="styles.css">

<script language="javascript">
    var markers = [];
    var createdA = false;
    var shownA = false;
    var markersA = [];
    var markersA = [];
    var a1;
    var a2;
    var a5;
    var data1 = [];
    var center = L.bounds([1.56073, 104.11475], [1.16, 103.502]).getCenter();

    function init() {

        map = new L.Map('test_map').setView(new L.LatLng(center.x, center.y), 12);;
        var basemap = L.tileLayer('https://maps- 
      {s}.onemap.sg/v3/Original/{z}/{x}/{y}.png', {
            attribution: '<img src="https://docs.onemap.sg/maps/images/oneMap64- 
     01.png" style="height:20px;width:20px;"/> New OneMap | Map data © contributors, 
     <a href="http://SLA.gov.sg">Singapore Land Authority</a>',
            detectRetina: true,
            maxZoom: 20,
            minZoom: 9
        });
        basemap.addTo(map);

        $.ajax({

            type: "GET",

            url: '',


            success: function (data, status, xhr) {


                for (var i = 0; i < data.Table.length; i++) {
                    for (var s = 1; s < data.Table.length; s++) {
                        var d1 = { Table: { Latitude: data.Table[i].Latitude, 
     Longitude: data.Table[i].Longitude, Station: 'This is Littleton, CO.', Box: 
     'Box', LocationSend: 'testing1' } };
                        var d2 = { Table: { Latitude: data.Table[s].Latitude, 
     Longitude: data.Table[s].Longitude, Station: 'This is Denver, CO.', Box: 'Box', 
     LocationSend: 'testing2' } };
                        data1.push(d1);
                        data1.push(d2);


                        markersA.push(L.marker(new L.LatLng(data.Table[i].Latitude, 
    data.Table[i].Longitude)));
                        markersA.push(L.marker(new L.LatLng(data.Table[s].Latitude, 
    data.Table[s].Longitude)));
                        map.addLayer(markersA[0]);
                        map.addLayer(markersA[1]);
                    }




                }


            },


            error: function (xhr) {

                alert(xhr.responseText);

            }

        });

        var myTimer = setInterval(function () {


            groupOne(data1);

        }, 2000);

    }
    function pushMarker(marker) {
        markers.push(marker);
    }
    function createMarker(data1) {
        var marker = new L.marker([data1[0], data1[1]]);
        pushMarker(marker);

    }
    function showMarker(marker) {

        map.addLayer(marker);
    }
    function hideMarker(marker, i) {

        var locate = marker.getLatLng();

        markersA[i].setLatLng(locate);


    }
    function createMarkerA(data1) {
        var valid = true;
        for (var i = 0; i < data1.length; i++) {

            var customPopup = 'Coordinates X: ' + data1[i].Table.Latitude + 
     '</br>Coordinates Z: ' + data1[i].Table.Longitude + '</br>Station: ' + 
     data1[i].Table.Station + ' </br> Box: ' + data1[i].Table.Box + '</br > 
     Timestamp: ' + data1[i].Table.LocationSend;

            //var customOptions =
            //            {
            //                'maxWidth': '500',
            //                'className': 'custom'
            //            };
            //var marker = L.marker(new L.LatLng(data[i].Table.Latitude, 
      data[i].Table.Longitude, data[i].Table.Station));
            var marker = L.marker(new L.LatLng(data1[i].Table.Latitude, 
      data1[i].Table.Longitude));
            marker.bindPopup(customPopup);
            pushMarker(marker);


        }

    }


    function groupOne(data) {

        //$.ajax({
        //    type: "GET",
        //    url: '',
        //    data:data,
        //    success: function (data, status, xhr) {



        if (createdA == false) {
            createMarkerA(data);

            shownA = true;
            createdA = true;

        }
        else if (shownA == false) {

            for (var a = 0; a <= 2; a++) {
                hideMarker(markers[a], a);

            }
            shownA = true;

        }
        else if (shownA == true) {

            for (var aa = 3; aa <= 5; aa++) {
                var i = aa - 3;
                hideMarker(markers[aa], i);

            }
            shownA = false;

        }




        //}
        //,
        //error: function (xhr) {

        //    alert(xhr.responseText);

        //}
        //});

    }
</script>

 </head>
 <body onLoad="javascript:init();">
<div id='test_map' style=" height: 800px; "></div>