如何使用 javascript setTimeout 仅刷新特定代码？答案

【问题标题】：How to refresh just specific code with javascript setTimeout?如何使用 javascript setTimeout 仅刷新特定代码？
【发布时间】：2014-06-05 12:40:25
【问题描述】：

我有这样的代码：

<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>

我想做一个 GPS 跟踪系统。获取位置的方法是通过短信。单击“获取位置”按钮后，将发送询问位置的短信。所以，我需要每秒刷新一次地图，直到 GPS 追踪器回复短信。所以我可以拿数据在谷歌地图上创建一个标记。我不想刷新整个页面。我只想刷新谷歌地图。有没有办法用 setTimeout 做到这一点？谢谢...

【问题讨论】：

您可以使用setInterval 做到这一点。看我的回答演示here

标签： javascript php google-maps gps gis

【解决方案1】：

你可以试试这个代码

var i = setInterval(show_maps, 1000);

如果你想停止间隔

clearInterval(i);

【讨论】：

【解决方案2】：

Demo

您可以使用以下结构。您的地图将每 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();
});

【讨论】：