I want to update my car location in javascript

I use leaflet map ,this map can show my location (I success)
I hope I can update my location 10 second a time (just this div field, other data not to update)
but now I just can update hole page to update my map, how can I do to update partial page? this is my code:

    <html>
<head>
     
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
</head>
  <?php
$num=0;
?>
<body >
      <div id="mapid6" style="width: 600px; height: 600px;"></div>
      
        <?php
                ini_set('date.timezone','Asia/Taipei'); 
                            $sdate = date("Y~m~d");
                            $stime = date("h~m");
                            $car_id=array( "2010260204");
          
        $url6 = 'http://my_ip:6060/GetGpsHistoryTrack/100?DeviceId='.$car_id[$num].'&BeginTime='.$sdate.'~00~00~00&EndTime='.$sdate.'~23~59~59'; 
         
        $json6 = file_get_contents($url6);
        
        $arr6 = json_decode($json6, true);
     
        $arr6_2 =$arr6["GpsHistoryTrackInfo"];
        
        $count6=count($arr6_2)-1;
      
        $la6=$arr6["GpsHistoryTrackInfo"][$count6]["la"];
         
        $lo6=$arr6["GpsHistoryTrackInfo"][$count6]["lo"];
        
            ?>  
            <script>            
                 var cars = [ 'KLE-5592'];
                var mymap = L.map('mapid6').setView([<?=$la6?>, <?=$lo6?>], 13);
 
                var caricon = L.icon({
                    iconUrl: 'http://map.chansing.com.tw/car.png',
                    iconSize: [100, 80],
                    popupAnchor: [0, -20]
                });     
 
                L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                    maxZoom: 18,
                    id: 'mapbox/streets-v11',
                    tileSize: 512,
                    zoomOffset: -1
                }).addTo(mymap);
                var marker = L.marker([ <?=$la6?>, <?=$lo6?>], {icon: caricon}).addTo(mymap).bindPopup(cars[<?=$num?>]).openPopup();
                  setInterval('window.location.reload();',5000);        
            </script>
</body>
</html>

thanks

Answer

It looks difficult to do it directly, you can use jQuery to refresh it at some given time. Check this link for more information

Advertisement

Answer