从php文件在谷歌地图中刷新经纬度

Question

i am new in stackoverflow and programming first time hello how can i refresh a php data to javascript google map lat long bicos the lat long ar change every second and i wood like to refresh lat long like realtime but the problem is thets load only the first time the real position and refresh only the same lat long. how to load lat lon from php without reload the page

in this file is the php and this code down wher load google maps

    <script>
  function initMap() {
  var myLatlng = new google.maps.LatLng('.json_encode($Lat).', '.json_encode($Long).');
var mapOptions = {
zoom: 13,
center: myLatlng
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
    });

marker.setMap(map);
setInterval( function(){ 

    marker.setPosition( new google.maps.LatLng( '.json_encode($Lat).', '.json_encode($Long).' ) );
    map.panTo( new google.maps.LatLng( '.json_encode($Lat).', '.json_encode($Long).' ) );

    }, 1000 );
}

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myapikey&callback=initMap">
</script>

Answer 1

The question I am hearing:

How can I asynchronously load google map position based on changing coordinates provided by a php script?

Proposed solution:

I think the best way to accomplish this is to create a separate php script that will provide updated coordinates via json format. Then consume the coordinates from your JavaScript in a separate php script with a fetch. You can run this inside of your setInterval function.

Your new php script would end with something like this:

echo json_encode(array('latitude' => $Lat, 'longitude' => $Lon));

Then inside of your setInterval you could do something like this:

setInterval( function(){ 
  fetch(`newphpscript.php`)
    .then((response) => response.json())
    .then((data) => {
      marker.setPosition(new google.maps.LatLng(data.latitude, data.longitude));
      map.panTo( new google.maps.LatLng(data.latitude, data.longitude ));
  });
}, 1000 );

Please comment if you need any further clarification.