Question

我目前正在开发Google地图项目并正在实施搜索功能。在我的搜索功能中，我试图在侧面列出的内容中，刚刚添加到地图中的搜索引擎对应于每个大厅。但是在组装这个字符串时，我遇到了一个问题，即如果我不首先提醒数据，我的side_bar_html变量就不会输出。

这是我的searchMap功能。变量声明为：var side_bar_html = "";

function searchMap(term, map) {

closeSearch();  

searchCount = 0;
searchMarkers = [];

var request = GXmlHttp.create();

    request.open("GET", "admin/search.php?s=" + term, true);

    request.onreadystatechange = function() {

    if (request.readyState == 4) {

        var xmlDoc = GXml.parse(request.responseText);
        var points = xmlDoc.documentElement.getElementsByTagName("point");

        var polygonsToShow = [];
        for (var i = 0; i < points.length; i++) {                                   
            var lat = parseFloat(points[i].getAttribute("lat"));
            var lng = parseFloat(points[i].getAttribute("lng"));
            var pid = points[i].getAttribute("id");
            for(var j = 0; j < polygons.length; j++) {
                if(polygons[j].vt_bid == pid) {
                    polygonsToShow.push(j);
                }
            }
            var point = new GLatLng(lat,lng);           
            var pname = points[i].getAttribute("name");
            var curMarker = createSearchMarker(point, pid, pname,getLetter(i));                 
            map.addOverlay(curMarker);
        }
        //olays.buildings.checked = false; : Figure out some way to uncheck the buildings overlay checkbox?
        for(var k = 0; k < polygons.length; k++) {
            polygons[k].hide();
        }

        for(var l = 0; l < polygonsToShow.length; l++){ 
            polygons[polygonsToShow[l]].show();
        }
    }
}

request.send(null);
alert(side_bar_html); //side_bar_html will be empty unless I alert the variable


searchResults = new HtmlControl('<div style="background-color:white; border:solid 1px grey; padding:2ex; overflow:auto; width:125px; margin:1px;  font-size:14px;"><img align="right" style="cursor: pointer;" src="http://www.thebort.com/maps/images/close.gif" onclick="closeSearch()"><strong>Search</strong><br/>' + side_bar_html + '</div>', {selectable:true});
map.addControl(searchResults, new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 70)));

}

创建搜索标记的功能：

function createSearchMarker(point, id, pname, letIcon) {
    var marker = new GMarker(point,letIcon);
    GEvent.addListener(marker, "click", function() {         
        marker.openInfoWindowHtml('<a href="#" onclick=\'tb_show("' + pname + '","admin/get_info.php?b=' + id + '&KeepThis=true&TB_iframe=true&height=400&width=600",false); return false;\'>' + pname + '</a>');

     });

side_bar_html = side_bar_html + '<a href="javascript:clickSearch(' + searchCount + ')">' + String.fromCharCode("A".charCodeAt(0) + searchCount) + ': ' + pname + '</a><br>';
marker.vt_id = id;
    searchMarkers.push(marker);
searchCount++;

    return marker;
 }

我想立即为此项目保留代码曝光率，所以如果有任何需要说明请告诉我。谢谢！

Answer 1

所以我对你的问题的理解是在side_bar_html函数调用期间设置了onreadystatechange，但除非你提醒它，否则你没有看到它被设置。

以下是可能发生的事情：Ajax请求需要一些时间才能完成。当您致电req.send(null)然后启动请求时，您的onreadystatechange函数将在稍后，在您的网络浏览器发出请求并获得回复之后才会被调用。

因此，当您立即尝试使用side_bar_html值时，它不起作用，因为响应尚未恢复。但是，当您提醒值时，执行警报所花费的时间会使浏览器有时间获得响应并适当设置side_bar_html值。

你的根本问题是Ajax是异步的（这是A来自）并且你试图同步使用它（意味着你假设事情总是以特定的顺序发生）。您最好的办法是在side_bar_html函数中放置使用onreadystatechange的代码，以便在设置之前不会使用它。

Answer 2

将下面的代码添加到onreadystatechange函数的末尾（在if语句中检查值为4）。 e.g：

request.onreadystatechange = function() {

if (request.readyState == 4) {

    var xmlDoc = GXml.parse(request.responseText);
            var points = xmlDoc.documentElement.getElementsByTagName("point");

            var polygonsToShow = [];
            for (var i = 0; i < points.length; i++) {                                                       
                    var lat = parseFloat(points[i].getAttribute("lat"));
                    var lng = parseFloat(points[i].getAttribute("lng"));
                    var pid = points[i].getAttribute("id");
                    for(var j = 0; j < polygons.length; j++) {
                            if(polygons[j].vt_bid == pid) {
                                    polygonsToShow.push(j);
                            }
                    }
                    var point = new GLatLng(lat,lng);                       
                    var pname = points[i].getAttribute("name");
                    var curMarker = createSearchMarker(point, pid, pname,getLetter(i));                             
                    map.addOverlay(curMarker);
            }
            //olays.buildings.checked = false; : Figure out some way to uncheck the buildings overlay checkbox?
            for(var k = 0; k < polygons.length; k++) {
                    polygons[k].hide();
            }

            for(var l = 0; l < polygonsToShow.length; l++){ 
                    polygons[polygonsToShow[l]].show();
            }

            searchResults = new HtmlControl('<div style="background-color:white; border:solid 1px grey; padding:2ex; overflow:auto; width:125px; margin:1px;  font-size:14px;"><img align="right" style="cursor: pointer;" src="http://www.thebort.com/maps/images/close.gif" onclick="closeSearch()"><strong>Search</strong><br/>' + side_bar_html + '</div>', {selectable:true});
            map.addControl(searchResults, new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 70)));
}

Javascript范围错误

2 个答案: