Как обновить маркеры в реальном времени с помощью ajax

Могу ли я узнать, как мне обновить местоположение в режиме реального времени, если значение местоположения было изменено. Текущий код - это то, что я использовал для извлечения данных из базы данных. Я пробовал много решений, таких как установка интервала или тайм-аута, но это не помогло мне в решении проблемы.

$.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);

    }




});

SetInteval не принимает внутри вызова ajax.

LDS 26.10.2018 09:08

Этот вызов ajax отличается в функции, и функция вызывается внутри временного интервала

LDS 26.10.2018 09:09

хм, но как я могу обновлять маркеры каждые 5 секунд после того, как ajax завершил вызов?

Lee Yue Loong 26.10.2018 09:25

в соответствии с вашим звонком он автоматически изменится после повторной инициализации карты

LDS 26.10.2018 10:08

Я пробовал, но это не меняется, если мне не нужно обновлять веб-страницу

Lee Yue Loong 26.10.2018 10:14

нет необходимости обновлять страницу. только обновите карту. может показать, как инициализировать карту с помощью маркера

LDS 26.10.2018 10:57

может отображать, как определить функцию и вызвать с помощью ajax во временном интервале

LDS 26.10.2018 11:00

@LDS Я добавил код карты, а также маркеры.

Lee Yue Loong 29.10.2018 02:21

map.removeLayer (marker) -> у меня это не работает. Так что это может не сработать для вас. Insted этой функции использует то, что я использую как маркеры [i] .setLatLng (location); Если вы получаете данные из базы данных для обновления, место, которое вы разрабатываете, необходимо обновить. Но если вы вызываете ajax из временного интервала, не нужно обновлять. Хорошо, я пытаюсь решить в вашем коде в моей системе. Пожалуйста, подождите

LDS 30.10.2018 09:18
1
9
812
3

Ответы 3

Просто я беру несколько статических точек, чтобы изменить точку без обновления страницы

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

    <link rel="stylesheet" href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" />
    <script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>

    <script language="javascript">
        var map;
        var markers = [];
        var center = L.bounds([40.712, -74.227], [40.774, -74.125]).getCenter();
        //alert(center.x);
        function init() {
            
            map = new L.Map('map');
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
                maxZoom: 18
            }).addTo(map);
            map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.
            var seconds = 0.005;
            map.setView(new L.LatLng(center.x, center.y), 12);
            setmarkers(seconds);
            var myTimer = setInterval(function () {
                center.x = center.x + seconds + 0.01;
                center.y = center.y + seconds + 0.01;
                
                getmarkers(seconds);
                seconds = seconds + 0.01;
                
            }, 2000);

            
            
        }
        function getmarkers(v) {
            //alert(v);
            for (var i = 0; i < 10; i++) {
                var location = new L.LatLng(center.x + i * v, center.y + i * v);
                markers[i].setLatLng(location);
                markers[i].addTo(map);
            }
        }
        function setmarkers(v) {
            
            alert(v);
            var radius = 30;
            
        

            for (var i = 0; i < 10; i++) {
                var location = new L.LatLng(center.x + i * v, center.y + i * v)
                var mark = L.marker(location);
                markers.push(mark);
               
            }

          
        }
        function onLocationFound(e) {
            var radius = e.accuracy / 2;
            radius = 30;
            var location = e.latlng
            L.marker(location).addTo(map)
            L.circle(location, radius).addTo(map);
            alert(location.lat);
            alert(location.lng);
            addinlocations(location);
        }

        function onLocationError(e) {
            alert(e.message);
        }

        function getLocationLeaflet() {
            map.on('locationfound', onLocationFound);
            map.on('locationerror', onLocationError);

            map.locate({ setView: true, maxZoom: 16 });
        }
        function pushMarker(marker) {
            markers.push(marker);
        }
        function addinlocations(pot) {

            for (var i = 0; i < 10; i++) {
                var nmarker = new L.LatLng(pot.lat + i * 0.5, pot.lng * 0.5);
                var radius = 20;

                var location = nmarker
                L.marker(location).addTo(map)
                L.circle(location, radius).addTo(map);
               // pushMarker(nmarker);
            }
        }
    </script>

</head>
<body onLoad="javascript:init();">
    <div id="map" style="height: 500px"></div>
    <input type="button" value="Locate me!" onClick="javascript:getLocationLeaflet();">

</body>
</html>

Это не работает для меня, я бы хотел, чтобы при изменении широты и долготы местоположение маркера было обновлено

Lee Yue Loong 30.10.2018 08:56

map.removeLayer (marker) -> у меня это не работает. Так что это может не сработать для вас. Insted этой функции использует то, что я использую как маркеры [i] .setLatLng (location); Если вы получаете данные из базы данных для обновления, место, которое вы разрабатываете, необходимо обновить. Но если вы вызываете ajax из временного интервала, не нужно обновлять. Хорошо, я пытаюсь решить в вашем коде в моей системе. Пожалуйста, подождите

LDS 30.10.2018 09:43

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

    <link rel="stylesheet" href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" />
    <script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>

    <script language="javascript">
        var map;
        var markers = [];
        var createdA = false;
        var shownA = false;
        var markersA = [];
        var markersA = [];
        var a1;
        var a2;
        var a5;
        
        var center = L.bounds([39.61, -105.02], [39.77, -105.23]).getCenter();
        
        function init() {
            
            map = new L.Map('test_map').setView(new L.LatLng(center.x, center.y), 12);;
            var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
                detectRetina: true,
                maxZoom: 20,
                minZoom: 9
            });
            basemap.addTo(map);
            
           
            var data = [];
            var d1 = { Table: { Latitude: 39.61, Longitude: -105.02, Station: 'This is Littleton, CO.', Box: 'Box', LocationSend: 'testing1' } };
            var d2 = { Table: { Latitude: 39.74, Longitude: -104.99, Station: 'This is Denver, CO.', Box: 'Box', LocationSend: 'testing2' } };
            var d3 = { Table: { Latitude: 39.73, Longitude: -104.8, Station: 'This is Aurora, CO.', Box: 'Box', LocationSend: 'testing3' } };
            var d4 = { Table: { Latitude: 39.733, Longitude: -104.821, Station: 'This is Littleton, CO.', Box: 'Box', LocationSend: 'testing4' } };
            var d5 = { Table: { Latitude: 39.742, Longitude: -105.002, Station: 'This is Denver, CO.', Box: 'Box', LocationSend: 'testing5' } };
            var d6 = { Table: { Latitude: 39.734, Longitude: -104.811, Station: 'This is Aurora, CO.', Box: 'Box', LocationSend: 'testing6' } };
            data.push(d1);
            data.push(d2);
            data.push(d3);
            data.push(d4);
            data.push(d5);
            data.push(d6);

            markersA.push(L.marker(new L.LatLng(39.61, -105.02)));
            markersA.push(L.marker(new L.LatLng(39.74, -104.99)));
            markersA.push(L.marker(new L.LatLng(39.73, -104.8)));
            map.addLayer(markersA[0]);
            map.addLayer(markersA[1]);
            map.addLayer(markersA[2]);
          
           
            var myTimer = setInterval(function () {
               
                groupOne(data);
                
            }, 2000);
            var markersLayer = L.layerGroup(markersA);

            map.addLayer(markersLayer);
            var controlSearch = new L.Control.Search({
                position: 'topright',
                layer: markersLayer,
                initial: false,
                zoom: 15,
                marker: false
            })
            map.addControl(controlSearch);
           
        }
        function pushMarker(marker) {
            markers.push(marker);
        }
        function createMarker(data) {
            var marker = new L.marker([data[0], data[1]]);
            pushMarker(marker);
           
        }
        function showMarker(marker) {
           
            map.addLayer(marker);
        }
        function hideMarker(marker, i) {
           
            var locate = marker.getLatLng();
           
            markersA[i].setLatLng(locate);
          
           
        }
        function createMarkerA(data) {
            var valid = true;
            for (var i = 0; i < data.length; i++) {
                
                var customPopup = 'Coordinates X: ' + data[i].Table.Latitude + '</br>Coordinates Z: ' + data[i].Table.Longitude + '</br>Station: ' + data[i].Table.Station + ' </br> Box: ' + data[i].Table.Box + '</br > Timestamp: ' + data[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(data[i].Table.Latitude, data[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: 500px"></div>
   

</body>
</html>

Я пробовал ваше решение, и оно работает, но когда я меняю URL-адрес карты, карта не отображается

Lee Yue Loong 31.10.2018 02:25

Это может произойти из-за версии. Кстати, какой URL вы изменили

LDS 31.10.2018 04:57

Извините, что снова беспокою, я попытался отправить фиктивное местоположение в базу данных, но карта все еще показывает то же местоположение, что и раньше

Lee Yue Loong 31.10.2018 05:05

как получить фиктивные данные из базы данных

LDS 31.10.2018 05:10

я использую ajax для извлечения данных из базы данных

Lee Yue Loong 31.10.2018 05:12

сначала проверьте URL-адрес и проверьте, поступают ли данные или нет

LDS 31.10.2018 05:14

Я уверен, что данные обновляются, когда я отправляю фиктивное местоположение в базу данных в качестве URL-адреса, который у меня есть только для получения последнего местоположения из базы данных. Я также пробовал с таким приложением, как почтальон

Lee Yue Loong 31.10.2018 05:15

Я только что начал ваш вызов ajax. Пожалуйста, отобразите вызов ajax

LDS 31.10.2018 05:18
 <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>

Другие вопросы по теме