[英]How to refresh just specific code with javascript setTimeout?
I have a code like this : 我有这样的代码:
<html>
<head>
<meta charset="utf-8">
<title>GPS Tracker</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="view/style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function show_maps()
{
var div_peta = document.getElementById('kanvas');
var tengah = new google.maps.LatLng(-8.801502,115.174794);
var options =
{
center : tengah,
zoom : 14,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
//make map object
var google_map = new google.maps.Map(div_peta,options);
}
</script>
</head>
<body OnLoad="show_maps();">
</div>
<div class="container">
<div class="row">
<div class="col-md-4"><div class="panel panel-default panel-body">
<p><b><h4>Tracking</h4></b><hr>
<form method="GET" action="../controller/location.php">
<p><input class="btn btn-primary" type="submit" value="get location" style="width:280px"></a></p>
</form>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default panel-body" style="height:490px">
<div id="kanvas"> kanvas peta</div>
</div>
</div>
</div>
</div>
I want to make a GPS tracking system. 我想制作一个GPS跟踪系统。 the method to get the location is by SMS.
获取位置的方法是通过SMS。 once the "get location" button clicked, the SMS to ask for location is delivered.
单击“获取位置”按钮后,便会发送SMS以询问位置。 so, I need to refresh the map every second until the GPS tracker reply the SMS.
因此,我需要每秒刷新一次地图,直到GPS跟踪器回复短信为止。 so I can take the data to create a marker on google map.
这样我就可以将数据用于在Google地图上创建标记。 I don't want to refresh the whole page.
我不想刷新整个页面。 I just want to refresh the google map.
我只想刷新Google地图。 is there a way to do that with setTimeout?
有没有办法用setTimeout做到这一点? thank you...
谢谢...
You can try this code 您可以尝试此代码
var i = setInterval(show_maps, 1000);
if you want to stop the interval 如果要停止间隔
clearInterval(i);
You can use following structure. 您可以使用以下结构。 Your map will be reload in every 5 seconds;
您的地图将每5秒钟重新加载一次;
var mapsLoaded = false;
window.mapsCallback = function(){
mapsLoaded = true;
setInterval(function(){
$(window).trigger('mapsLoaded');
}, 5000);
}
window.loadMaps = function(){
if(mapsLoaded) return window.mapsCallback();
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=mapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
$(document).ready(function(){
function initialize(){
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(47.3239, 5.0428),
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('kanvas'),mapOptions);
}
$(window).bind('mapsLoaded', initialize);
window.loadMaps();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.