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/

更新标记而不刷新页面

1 个答案: