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>

JavaScript
​x
 
    <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