从MySQL数据库更新Google地图上标记“实时”的更改坐标

时间:2017-11-21 12:29:44

标签: javascript php mysql google-maps google-maps-api-3

我正在尝试找到一个解决方案,允许我在Google地图上“实时”绘制许多移动物体的GPS坐标。
每个对象的GPS坐标将不断更新到MySQL数据库中,我想每三秒钟读取一次更新的坐标,并在Google Map上重新绘制标记坐标,而无需用户刷新页面。
我有一个从数据库接收数据的代码,并且使用setInterval每3秒读取一次数据库信息。
我的问题在于:每个setinterval加载 没有读取新的数据库数据。这是意思 数据库信息只读一次,不会收到任何新信息。 我该如何解决这个问题?

<?php
    include "db_connect.php";
    $sql="SELECT * FROM temperature_details ORDER BY id DESC LIMIT 1 ";
    $result=mysql_query($sql);
    $firstrow = mysql_fetch_assoc($result);
    function getNewLat(){
        $sql="SELECT * FROM temperature_details ORDER BY id DESC LIMIT 1 ";
        $result=mysql_query($sql);
        $lat = mysql_fetch_assoc($result);
        return $lat['latitude'];
    }
    function getNewLang(){
        $sql="SELECT * FROM temperature_details ORDER BY id DESC LIMIT 1 ";
        $result=mysql_query($sql);
        $Lang = mysql_fetch_assoc($result);
        return $Lang['longitude'];
    }
?>
<script src="http://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry"></script>
    <div id="map" style="height:500px;width:100%;" ></div>

<script>
    function initialize() {
        var myLatLng = new google.maps.LatLng({lat:<?php echo .$firstrow['latitude'];?>, lng: <?php echo .$firstrow['longitude'];?>}),
        myOptions = {
            zoom: 16,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map( document.getElementById( 'map' ), myOptions   ),
        marker = new google.maps.Marker( {position: myLatLng, map: map} );
        marker.setMap( map );
        moveMarker( map, marker );
    }
    function moveMarker( map,marker ) {
        setInterval( function(){ 
            marker.setPosition(new google.maps.LatLng( {lat:<?php echo getNewLat();?>, lng: <?php echo getNewLang();?>} ));
            map.panTo( new google.maps.LatLng(  {lat:<?php echo getNewLat();?>, lng: <?php echo getNewLang();?>} ));
            console.log("I am working");
        }, 3000 );
    };
    initialize();
</script> 

1 个答案:

答案 0 :(得分:1)

我可以解决它。

function moveMarker(){
  setInterval( function(){ 
      $.get("point", function(data){
      var mydata= $.parseJSON(data);
      var art1 = mydata.lat;  // <-----------  access the element
      var art2 = mydata.lng;
      marker.setPosition( new google.maps.LatLng( {lat:art1 , lng: art2} ) );
      map.panTo( new google.maps.LatLng( {lat:art1 , lng: art2} ));

    });
}, 3000 );

在上面的代码中,&#34;指向&#34;是一个页面,它接收坐标作为查询 与laravel framwork

<?php
use App\MoteharekModel;
  $lt = MoteharekModel::orderby('id','desc')->first();
  echo json_encode($lt);
?>