X秒ごとにmysqlデータでgoogle javaマップを更新します。

Question

マップ上のマーカーをX秒ごとに更新しようとしています。マップは最初のデータでうまくロードされますが、マーカだけをリフレッシュする方法（マップ全体をリフレッシュする方法）はありません。
私のコードはかなりストレートです。私はphpとmysqlについてよく知っていますが、これを取り除く。

<script> 
    var customLabel = { 
    restaurant: { 
     label: 'R' 
    }, 
    bar: { 
     label: 'B' 
    } 
    }; 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(51.337834, 5.222728), 
     zoom: 7 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

     downloadUrl('http://myurl.php', function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName('marker'); 
     Array.prototype.forEach.call(markers, function(markerElem) { 
      var name = markerElem.getAttribute('name'); 
      var address = markerElem.getAttribute('address'); 
      var type = markerElem.getAttribute('type'); 
      var point = new google.maps.LatLng(
       parseFloat(markerElem.getAttribute('lat')), 
       parseFloat(markerElem.getAttribute('lng'))); 

      var infowincontent = document.createElement('div'); 
      var strong = document.createElement('strong'); 
      strong.textContent = name 
      infowincontent.appendChild(strong); 
      infowincontent.appendChild(document.createElement('br')); 

      var text = document.createElement('text'); 
      text.textContent = address 
      infowincontent.appendChild(text); 
      var icon = customLabel[type] || {}; 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      label: icon.label 
      }); 
      marker.addListener('click', function() { 
      infoWindow.setContent(infowincontent); 
      infoWindow.open(map, marker); 
      }); 
     }); 
     }); 
    } 



    function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
     } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
    } 



    function doNothing() {} 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"> 
</script> 

は、私は、しかし、私はこの小さな一部としてそれを置くことによって、この例に何回か試してみました..私はのsetInterval関数でどこかに使用する必要があり、強い気持ちを持っています。

setInterval(function() { 
downloadUrl('http://myurl.p.... 
}, 5000); 

しかし、何の考えもありません。

UPDATE

私は...これが最も効率的な方法であれば、私は知らない...それは以下のコードを使用して作業を得ることができたと今私は、私はまだ必要な..道を示す追加のマーカーを取得します最初にすべてのマーカーをクリアしてから新しいマーカーを入れる方法。

Answer 1

1回だけ使用する多くの変数を使用します。あなたはあなたのコードを冷たく圧縮します。さらに、マーカーで配列を追加して、関数でそれらをきれいにすることができます。

var myMarkers = []; 

downloadUrl('myurl.php', function(data) { 
    var xml = data.responseXML; 
    clearMarkers(); 
    var markers = xml.documentElement.getElementsByTagName('marker'); 
    Array.prototype.forEach.call(markers, function(markerElem) { 
     var infowincontent = document.createElement('div'); 
     var strong = document.createElement('strong'); 
     strong.textContent = markerElem.getAttribute('name') 
     infowincontent.appendChild(strong); 
     infowincontent.appendChild(document.createElement('br')); 

     var text = document.createElement('text'); 
     text.textContent = markerElem.getAttribute('address') 
     infowincontent.appendChild(text); 
     var icon = customLabel[markerElem.getAttribute('type')] || {}; 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: new google.maps.LatLng(
       parseFloat(markerElem.getAttribute('lat')), 
       parseFloat(markerElem.getAttribute('lng')));, 
      label: icon.label 
     }); 
     marker.addListener('click', function() { 
      infoWindow.setContent(infowincontent); 
      infoWindow.open(map, marker); 
     }); 
     myMarkers.push(marker); 
    }); 
}, 5000); 

function clearMarkers() { 
    for (var i = 0; i < myMarkers.length; i++) { 
     myMarkers[i].setMap(null); 
    } 
    myMarkers.length = 0; 
} 

が動作するはずです：あなたはそこにそれを追加するのではなく、downloadUrlを呼び出す前に、この関数はとも呼ばれることができます。