Question

所以我为我的应用创建了一个神视图，这样我就可以实时看到当前的用户，但我却遇到了这个问题。我使用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大于最后一个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

不要为每个用户制作新地图，创建一个全局地图变量，初始化一次，然后将用户添加到其中。

如何使用ajax将标记附加到谷歌地图

1 个答案: