-1

请帮助我如何在给定的代码中使用 AJAX 在 5 秒内自动加载地图，以便每 5 秒从数据库中获取数据。在此代码中，每次我必须刷新整个页面时在地图中获取新数据。请帮助我只加载地图以在地图中显示新位置 

#panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
html, body, #map {
  height:500px;
  width:920px;
  margin: 0;
}
#latlng{
    width:225px;
}
</style>
<title>maptest2 </title>
<html>
<!--<meta http-equiv="refresh" content="6">-->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=weather"></script>
<script type="text/javascript">


</script>

<?php


$tes=1;
    mysql_connect('localhost','root','');
    mysql_select_db('gps_test1');

    ?>
<div id="map"> </div>


<?php



$lat=27.693377;
    $lon=85.282783;



sleep(2);
?>
<?php $b=1; ?>
<script type="text/javascript">

var linebreak = "<br />";
//document.write("For loop code is beginning")
var add=[];
var arr=[];
var lat2=[];
var lon2=[];
<?php /*

     var lat2= <?php echo json_encode($latt); ?>;
     var lon2=<?php echo json_encode($lonn); ?>;
*/?>
var add=[];
var a;
var j = 1;
var i=1;
var llat=<?php echo $lat ?>;
var llon=<?php echo $lon ?>;
function codeLatLng() {

document.getElementById("add2").innerHTML=j;
i=i+1;
<?php
    //print_r($row);

//header("refresh: 3;");
    $sql=mysql_query("select * from tbl_latlng2 order by sno desc");

$row=mysql_fetch_assoc($sql);

$latt=$row['lat'];
$lonn=$row['lon'];
$location=$row['location'];
$sno=$row['sno'];
$tes=$tes+1;
sleep(2);
?>
    latlng = new google.maps.LatLng(<?php echo $latt ?> , <?php echo $lonn ?>);//lat2[j],lon2[j]);

        map.setZoom(21);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            center:latlng
        });


       infowindow.setContent("<?php echo $location ?>");
       infowindow.open(map,marker);
        marker.setMap(map);

//document.getElementById("add").innerHTML=results[1].formatted_address;
//document.getElementById("add2").innerHTML=Date();
document.getElementById("add").innerHTML="<?php echo $sno."now   ".$tes ?>";

j=j+1;
<?php
header("Cache-Control: no-cache");
?>
//window.setInterval(codeLatLng,5000);
}
setTimeout(codeLatLng,5000);

function initialize(){
    infowindow = new google.maps.InfoWindow();
latlng=new google.maps.LatLng(<?php echo $lat ?>, <?php echo $lon ?>);
geocoder=new google.maps.Geocoder();

var mapOptions = {
    center:latlng,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}



//google.maps.event.addDomListener(window,'load',initialize);

google.maps.event.addDomListener(window,'load',initialize);
</script>


<body onLoad="codeLatLng()">

    <p id="add"></p>
    <p id="add2"></p>

    <script>
    //document.write(add[3]);
    </script>

    </body>
    </html>
4

1 回答 1

0

你必须使用某种函数来定期调用传递需要在地图上显示的数据，就像这样SEE FIDDLE

setInterval(function(){ 
    lat++; //new latitude
    lon++;    //new longitued
    showMap(lat, lon);

}, 30000); //called in every 30 seconds

对于您的情况，新的 lat 和 long 将来自 ajax 调用，然后传递给 showMap 函数

于 2013-10-02T05:29:58.210 回答