ajaxを使用してGoogleマップにマーカーを追加する方法

Question

私はリアルタイムで現在のユーザーを見ることができるように私のアプリのためのgodviewを作成していますが、私はこの問題で立ち往生しています。私はajaxを使用してロード時に私のマップをレンダリングし、これはマップ上のマーカーとして私のテーブルの最初のユーザーを表示します。

function getUsers(){ 

if (window.XMLHttpRequest){ 
    var xmlhttp = new XMLHttpRequest(); 
} else { 
    var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
} 

xmlhttp.onreadystatechange = function(){ 

    if(xmlhttp.statusText === "OK"){ 

     var China = {lat: 9.081999, lng: -8.675277}; 
     var image = "node.png"; 

     var map = new google.maps.Map(mapDiv, { 
       zoom: 3, 
       center: China, 
       draggable: true, 
       streetViewControl: true, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

     var data = JSON.parse(xmlhttp.responseText); 

     for (var i = 0; i < data.length; i++){ 

      lastid = data[i].lastid; 


      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(data[i].latitude, data[i].longitude), 
       map: map, 
       icon: image 
      }); 
     } 
    } 
} 

アプリが最初に読み込まれるとき、私はちょうど良い最初のユーザーを取得します。その後、私はIDが特定の間隔で最初の最後のものより大きい新しいユーザーを取得したい。

//Php that fetches the new result 
    $lastId = $_GET['lastid']; 

    $sql = "select * from user where id > '$lastId' limit 1"; 
    $result = mysqli_query($conn, $sql); 

    if($result){ 

     $count = mysqli_num_rows($result); 

     if($count > 0){ 

      while($row = mysqli_fetch_assoc($result)){ 

       $user = ['lastid' => $row['id'], 'username' => $row['username'], 'latitude' => $row['latitude'], 'longitude' => $row['longitude']]; 
      } 

      echo json_encode($user); 
     } 
    } 


//Ajax call fetches the new users look something like this 
function addNewUser(lastid){ 


if (window.XMLHttpRequest){ 
    var xmlhttp = new XMLHttpRequest(); 
} else { 
    var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
} 

xmlhttp.onreadystatechange = function(){ 

    if(xmlhttp.statusText === "OK"){ 

     var data = JSON.parse(xmlhttp.responseText); 

     lastid = data.lastid; 

    } 
} 

xmlhttp.open('GET', 'fetchusers.php?user&lastid=' + lastid,true); 
xmlhttp.send(); 
} 

私はlastidを渡して、最新のものを取得するために私のonloadでいくつかの間隔メソッドを実行しようとします。私のジレンマはこの新しい結果をマーカーとしてマップに追加して、リフレッシュせずに追加し、項目ごとに自動的に更新します。

window.onload = function(){ 
    getUsers(); 

    setInterval(() => { 
    addNewUser(lastid); 
}, 5000); 

Answer 1

グローバルマップ変数を1つ作成して1回初期化してから、ユーザーを追加しないでください。