更新标记而不刷新页面

Question

我想在不刷新页面的情况下更新传单地图上的标记，比如每 3 秒一次。到目前为止我尝试过的代码如下：

 
<body>
<div id="map"></div>

    <script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js">
    </script>


      //<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

     <script>

    function getJSON(url) {
            var resp ;
            var xmlHttp ;

            resp  = '' ;
            xmlHttp = new XMLHttpRequest();

            if(xmlHttp != null)
            {
                xmlHttp.open( "GET", url, false );
                xmlHttp.send( null );
                resp = xmlHttp.responseText;
            }

            return resp ;
    }

    var gjson ;
     gjson = getJSON('/final_tlc13_modified.php') ;

     function refreshData()
  {
      x = 5;  // 5 Seconds

      // Do your thing here

       gjson = getJSON('/final_tlc13_modified.php') ;

       console.log(gjson);

      setTimeout(refreshData, x*1000);
  }


      refreshData(); // execute function
  
      
      

     var jsonData = JSON.parse(gjson);
     var array = [];
     var time_new=[];
     var latitude_list=[];
  var longitude_list=[];

  for (var i = 0; i < jsonData.length; i++) {
      var counter = jsonData[i].sms_time;
      //console.log(counter);
      latitude_list.push(jsonData[i].lati_tude);
      longitude_list.push(jsonData[i].longi_tude);
      //var lat_lng =[jsonData[i].lati_tude,jsonData[i].longi_tude];
      //document.write(lat_lng);
      //time_new =lat_lng.map(Number);
      //document.write(time_new);

      }

   var p1 = [latitude_list[0], longitude_list[0]];
  var p2 = [latitude_list[1], longitude_list[1]];
  var p3 = [latitude_list[2], longitude_list[2]];
  var p4 = [latitude_list[3], longitude_list[3]];
  var p5 = [latitude_list[4], longitude_list[4]];



     console.log(p5);
     var planes = [p1,p2,p3,p4,p5];

        var map = L.map('map').setView(p1,14);
        mapLink =
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);

  for (var i = 0; i < planes.length; i++) {
   marker = new L.marker([planes[i][0],planes[i][1]]
   //marker = new L.marker([planes[4][0],planes[4][1]]
   )
   .addTo(map);
  }


     </script>







 </body>
</html>

<style>
          body {
              padding: 0;
              margin: 0;
          }
          html, body, #map {
              height: 100%;
              width: 100%;
          }
    </style>

<!DOCTYPE html>
 <html lang="en">

 <head>
     <title>Simple Leaflet Map</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.css" />
     


</head>

来自'final_tlc13_modified.php'的json数据，我得到的格式如下： [{"tlc":"TLC_12","sms_time":"2019-11-29 13:37:33","lati_tude":"22.213308","longi_tude":" 84.870552"},{"tlc":"TLC_12","sms_time":"2019-11-29 13:40:31","lati_tude":"22.214302","longi_tude":"84.871429"},{"tlc":"TLC_12","sms_time":"2019-11-29 13:43:32","lati_tude":"22.214302","longi_tude":"84.871429"},{"tlc":"TLC_12","sms_time":"2019-11-29 13:46:33","lati_tude":"22.214302 ","longi_tude":"84.871429"},{"tlc":"TLC_12","sms_time":"2019-11-29 13:49:35","lati_tude" :"22.214302","longi_tude":"84.871429"}]

那么，我该如何更新标记？我阅读的方法是，如果数据采用 geojson 格式，那么它会很简单 perliedman。但随后我必须将 json 输出转换为 geojson 格式。

Answer 1

创建一个重新加载标记的函数。还将标记添加到自己的组中。

每次调用时，组都会被清除，标记也会被删除。然后将新标记添加到组中。


var fg = L.featureGroup().addTo(map);

fg.clearLayers();
marker = new L.marker([lat, lng]).addTo(fg)

https://jsfiddle.net/falkedesign/bw290evz/

更新标记而不刷新页面

update markers without refreshing page

javascript

json

geojson

leaflet