Question

我在索引页面上显示Google地图时遇到了麻烦。以下是我目前正在尝试的方式：

使用 GoogleMapApiV3 PHP类（http://pastebin.com/LCb3mP7f）
使用以下代码在PHP文件（loadMap.php）中生成我的地图：

$gmap->generate(); echo $gmap->getGoogleMap();

3 - 使用AJAX（基本上是echo中的内容）获取地图的脚本，然后使用eval()执行它。

以下是 refresh.js 页面的内容：

$(document).ready(function() {
    // show map and news
    refreshGUI();
});

// Update every 5 seconds
setInterval('refreshData()', 5000);
setInterval('refreshGUI()', 5000);

function refreshData() {
    $.post('index.php?js=refresh');
}
;

// Refreshes the page elements
function refreshGUI() {
    refreshNews();
    refreshMap();
} 

function refreshNews() {
    $.post('index.php?js=lastNews&lim=3', function(data) {
        var s = '';
        data = data.childNodes.item(0);
        for (var i = 0; i <= data.childNodes.length; i++) {
            data2 = data.childNodes.item(i);
            s += ('<div>' + data2.childNodes.item(1).textContent + '</div>');
            $('#newspane #news').html(s);
        }
        $('#newspane #news').html($('#newspane #news').html() + s);
    });
}

function refreshMap() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var myDiv = document.getElementById('map');
            myDiv.innerHTML = xmlhttp.responseText;

            var myScripts = myDiv.getElementsByTagName("script");
            if (myScripts.length > 0) {
                eval(myScripts[0].innerHTML);
            }
        }
    }
    // js=loadMap is my loadMap.php file, where I echo the map's script.
    xmlhttp.open("GET", "index.php?js=loadMap", true);
    xmlhttp.send();
}

我的问题：地图仅显示我使用CTRL + F5手动刷新索引页面的时间。它会在5秒后消失（我猜是因为setInterval()）

我该如何解决这个问题？这样做的最佳方式是什么？

这一切都让我疯狂，提前感谢任何帮助！

halpsb。

Answer 1

这让你发疯，你是对的。

setInterval('refreshData()', 5000);
setInterval('refreshGUI()', 5000);

你没有强制执行任何序列，只是同时发出3个ajax调用。

所以事情变得混乱。

因为您正在异步接收相互依赖的数据，并且在每个接收点处，您认为手中已准备好所有数据集，而不是......

setTimeout优于setInterval，因为：setInterval将每5秒启动一次，但setTimeout将在每次完成作业时启动一次并等待5秒，这将使您的脚本适应服务器响应时间。

请注意，我没有知道 jQuery调用，因此您最好找出正确的语法。

下面，我根据您的需要对代码进行两个示例修改：

如果您首先需要数据，那么新闻然后地图就像这样做

伪码：

start the sequence directly with a refreshData for first render

                           send refreshData 
when async receive occurs  send refreshNews
when async receive occurs  send refreshMap
when async receive occurs  render output
after render complete      setTimeout('refreshData',5000);

代码：

$(document).ready(function() {
    refreshData(); 
});


function refreshData() {
    $.post('index.php?js=refresh',
            refreshNews); // that is the part I am not so sure
}                           // I am jQuery illiterate sorry..

function refreshNews() {
    $.post('index.php?js=lastNews&lim=3', function(data) {
        var s = '';
        data = data.childNodes.item(0);
        for (var i = 0; i <= data.childNodes.length; i++) {
            data2 = data.childNodes.item(i);
            s += ('<div>' + data2.childNodes.item(1).textContent + '</div>');
            $('#newspane #news').html(s);
        }
        $('#newspane #news').html($('#newspane #news').html() + s);
    //---------------------------------------
        refreshMap();  // here add this
    //---------------------------------------
   });
}

function refreshMap() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var myDiv = document.getElementById('map');
            myDiv.innerHTML = xmlhttp.responseText;

            var myScripts = myDiv.getElementsByTagName("script");
            if (myScripts.length > 0) {
                eval(myScripts[0].innerHTML);
            }
        }
    //--------------------------------
    setTimeout(refreshData, 5000); // restart sequence in 5 seconds
    //--------------------------------
    }
    // js=loadMap is my loadMap.php file, where I echo the map's script.
    xmlhttp.open("GET", "index.php?js=loadMap", true);
    xmlhttp.send();
 }

如果您首先需要新闻，那么地图然后数据就像这样做

伪码：

start the sequence directly with a refreshNews for first render

                           send refreshNews
when async receive occurs  send refreshMap
when async receive occurs  send refreshData
when async receive occurs  render output
after render complete      setTimeout('refreshNews',5000);

代码：

$(document).ready(function() {
    refreshNews(); 
});


function refreshData() {
    $.post('index.php?js=refresh',
        function(){
            setTimeout(refreshNews, 5000); // restart sequence in 5
        }
    ); // that is the part I am not so sure
}      // I am jQuery illiterate sorry..

function refreshNews() {
    $.post('index.php?js=lastNews&lim=3', function(data) {
        var s = '';
        data = data.childNodes.item(0);
        for (var i = 0; i <= data.childNodes.length; i++) {
            data2 = data.childNodes.item(i);
            s += ('<div>' + data2.childNodes.item(1).textContent + '</div>');
            $('#newspane #news').html(s);
        }
        $('#newspane #news').html($('#newspane #news').html() + s);
    //---------------------------------------
        refreshMap();  // here add this
    //---------------------------------------
   });
}

function refreshMap() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var myDiv = document.getElementById('map');
            myDiv.innerHTML = xmlhttp.responseText;

            var myScripts = myDiv.getElementsByTagName("script");
            if (myScripts.length > 0) {
                eval(myScripts[0].innerHTML);
            }
        }
    //--------------------------------
        refreshData(); // here add this
    //--------------------------------
    }
    // js=loadMap is my loadMap.php file, where I echo the map's script.
    xmlhttp.open("GET", "index.php?js=loadMap", true);
    xmlhttp.send();
 }

我希望这很清楚，可以帮助你。

（Ajax + PHP）我的谷歌地图正在消失

1 个答案: