强制Google InfoWindow重新绘制自己或刷新其内容 [英] Force Google InfoWindow To Redraw Itself or Refresh its content
本文介绍了强制Google InfoWindow重新绘制自己或刷新其内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我如何强制google重绘其infoWindow或至少刷新其内容？
我注意到，在infoWindow中出现正确的数据之前，我必须在标记上点两下 - 可能我的闭包是罪魁祸首。
var markers = new Array（）;
var allMarkers = new Array（）;
var infoWindow = new google.maps.InfoWindow（）;
var infoWindows = new Array（）;
// IE缓存ajax请求 - 需要一种方法来清除每次获取数据的缓存
randomize = function（）{
var randomnumber = Math.floor（Math.random （）* 100000）;
返回随机数;
}
函数getBeachLocations（）{
//构造查询
var queryURL =https://www.googleapis.com/fusiontables/v1/query？ SQL =;
var queryTail =& key = apiKey& callback =？;
var query =SELECT * FROM BeachTable; //沙滩位置tbl
var queryText = encodeURI（query）;
$ .ajax（{
类型：GET，
url：queryURL + queryText + queryTail，
缓存：false，
dataType：' jsonp'，
成功：createMarkers，
错误：function（）{
alert（对不起，目前没有空间数据可用，请稍后再回来查看。
}
}）;
} // end getBeachLocations
function createMarkers（data）{// =====================创建标记
url =http：//swim.jpg;
var rows = data ['rows'];
var ecoli_rows;
var algae_rows;
（var m in rows）{
var ecoli_array = new Array（）;
var marker = new google.maps.Marker（{
map：map，
icon：new google.maps.MarkerImage（url），
beach_id：rows [m] [ 0]，
beach_name：rows [m] [1]，
beach_region：rows [m] [2]，
position：new google.maps.LatLng（rows [m] [4 ]，rows [m] [5]），
idx：m，
getHeader：function（）{
var str = [
'< div style =width： 650px;>'，
'< div class =tabs>'，
'< ul>'，
'< li>< a href = ＃tab-1class =ecoli_tab>< span> E .Coli Data< / span>< / a>< / li>'，
'< li>< a href = ＃tab-2class =algae_data>< span> Algae Data< / span>< / a>< / li>'，
'< / ul>'，
'< div id =tab-1>'，
'< h1>'+ this.beach_name +'< / h1>'，
'< h3>'+ this.beach_region +'< / h3>'
] .join（''）;
return str;
}，//结束getHeader方法
getEcoliData：function（）{//开始getEcoliData
var obj;
obj = getEcoliData（this.beach_id）;
return obj;
}，//结束getEcoliData方法
afterGetEcoliData：function（data）{
var ecoli_rows;
var ecoli_rows_str;
ecoli_rows = data ['rows'];
var ecoli_rows_str = [
'< table id =ecoli_tableclass =datastyle =width：500px;>'，
'< tr> ;'，
'样本日期'，
'平均大肠杆菌密度< /> （200cfu / 100ml）'，
'休闲水质指导值'，
'''
]。加入（''）;
if（typeof ecoli_rows =='undefined'）{
ecoli_rows_str ='< p>抱歉，目前这个海滩没有ecoli数据。< / p>< / div> '
} else {
for（var i = 0; i< ecoli_rows.length; i ++）{
//console.log(rows[i]）;
ecoli_rows_str + = '< TR>< TD>' + formatDate（ecoli_rows [I] [2]）+ '< / TD>< TD>' + checkEcoliCount（ecoli_rows [I] [3] ）+'< / td>< td>'+ ecoli_rows [i] [4] +'< / td>< / tr>';
}
ecoli_rows_str + ='< / table>'
ecoli_rows_str + ='< / div>';
//在测试后删除
ecoli_rows_str + ='< div id =tab-2>< h1>没有加载< / h1>< / div>< / DIV>< / DIV>';
} // end if
return ecoli_rows_str;
}，//结束outPutEcoliData方法
getAlgaeData：function（）{//开始getAlgaeData
var obj;
var algae_rows_str = [
'< div id =tab-2>'，
'< h1>'+ this.beach_name +'< h1>'，
'< h3>'+ this.beach_region +'< / h3>'，
'< table id =algae_tableclass =datastyle =width： 500px;>'，
'< tr>'，
'样本日期'，
'藻毒素微囊藻毒素
/> （20微克/升）'，
'休闲水质指导值'，
'蓝绿藻细胞< / gt> （$ 100,000 cells / ml）'，
'休闲水质指导值'，
''
]。加入（''）;
obj = getAlgaeData（this.beach_id）;
return obj;
$ b}，// end getAlgaeData method
$ b $ outPutAlgaeData：function（data）{
obj.done（function（data）{
algae_rows = data ['rows'];
}）; //结束成功
//console.log (algae_rows）;
if（typeof algae_rows ==='undefined'）{
algae_rows_str = [
'< div id =tab-2>'，
'< h1>'+ this.beach_name +'< / h1>'，
'< h>'+ this.beach_region +'< / h3>'，
'< p> < / p>'，
'< / div>'，
'< / div>'，
'< / div>对不起，没有海藻数据存在。 ;'，
'< / div>'
] .join（''）;
} else {
for（var i = 0; i< algae_rows.length; i ++）{
//console.log (rows [i]）;
algae_rows_str + = '< TR>< TD>' + formatDate（algae_rows [I] [2]）+ '< / TD>< TD>' + checkAlgaeToxinCount（algae_rows [I] [3] ）+ '< / TD>< TD>' + algae_rows [I] [4] + '< / TD>< TD>' + checkAlgaeCount（algae_rows [I] [5]）+< / TD> ;< td>'+ algae_rows [i] [6] +'< / td>< / tr>';
}
algae_rows_str + ='< / table>'
algae_rows_str + ='< / div>< / div>< / div>';
// return algae_rows_str;
} // end if
return algae_rows_str;
} // end outPutAlgaeData
}）; // ==================== end marker
allMarkers.push（marker）; //下拉菜单需要
console.log（marker.beach_id ++ marker.beach_name）;
//点击事件处理程序
google.maps.event.addListener（marker，'click'，function（）{
var ajaxObj = this.getEcoliData（）;
var marker = this;
var str;
// add loading gif
//infoWindow.setContent('<img src =../ img / loading.gifalt =加载数据/>'）;
ajaxObj.done（函数（数据）{
/ *
str = marker.getHeader（）+ marker.afterGetEcoliData（data）;
console.log（str）;
* /
infoWindow.setContent（marker。 getHeader（）+''+ marker.afterGetEcoliData（data））;
infoWindow.open（map，this）;
$（。tabs）。tabs（{selected：0 }）;
}）; //完成
}）; //结束点击事件处理程序
} //结束for循环foreach标记
checkAdvisory（）; //确定需要从哪里调用。
} //结束函数createMarkers
//格式日期为2013年1月1日
函数formatDate（num）{
var d = Date.parse（num） .toString（'MMMM d，yyyy'）;
return d;
}
//检查ecoli count - 任何大于或等于200 cfu / 100ml的标记被标记
函数checkEcoliCount（num）{
var海峡;
num = parseFloat（num）;
if（num> = 200）{
str ='< span class =ecoliCount_onstyle =color：orange>< b> + num +'< / b> ;< /跨度>';
} else {
return num;
}
return str;
}
//检查蓝绿藻的数量 - 任何大于或等于100,000 cells / ml的标记为
函数checkAlgaeCount（num）{
var str;
num = parseFloat（num）;
if（num> = 100000）{
str ='< span class =algaeCount_onstyle =color：orange>< b>'+ num +' < / b>< /跨度>';
} else {
return num;
}
return str;
}
//检查藻类毒素microcystin - 任何大于或等于20 ug / L的物质被标记
函数checkAlgaeToxinCount（num）{
// why < ？ - 问问卡西
var str;
var idx;
idx = num.indexOf（<）;
num = num.substring（idx + 1）;
num = parseFloat（num）;
if（num> = 20）{
str ='< span class =algaeToxinCountOnstyle =color：orange>< br>'+ num +' < / b>< /跨度>';
} else {
return num;
}
return str;
函数checkAdvisory（）{
/ *添加咨询图片
ecoliCount_on
algaeCount_on
algaeToxinCountOn
* /
$（。ecoliCount_on）。each（function（i，v）{
console.log（i，v）;
$（this）.css（color，green ）;
}）;
$（.algaeCount_on）。each（function（i，v）{
console.log（i，v）;
$（this）.css（color，绿色）;
}）;
$（.algaeToxinCountOn）。each（function（i，v）{
console.log（i，v）;
$（this）.css（color，绿色）;
}）;
}
函数getEcoliData（beach_id）{
//console.log（beach_id）;
var rows;
var queryURL =https://www.googleapis.com/fusiontables/v1/query?sql=;
var queryTail ='& key = apiKey& callback =？';
var whereClause =WHERE'Beach_ID'=+ beach_id;
var query =SELECT * FROM EcoliTable
+ whereClause +ORDER BY'Sample_Date'DESC;
var queryText = encodeURI（query）;
var ecoli_array = new Array（）;
return $ .ajax（{
类型：GET，
url：queryURL + queryText + queryTail，
缓存：false，
dataType： 'jsonp'
}）;
}
函数getAlgaeData（beach_id）{
var queryURL =https://www.googleapis.com/fusiontables/v1/query?sql= ;
var queryTail ='& key = apiKey& callback =？';
var whereClause =WHERE'Beach_ID'=+ beach_id;
var query =SELECT * FROM algaeTable
+ whereClause +ORDER BY'Sample_Date'DESC;
var queryText = encodeURI（query）;
// ecoli请求
返回$ .ajax（{
类型：GET，
url：queryURL + queryText + queryTail，
cache：假，
dataType：'jsonp'
}）;
//创建海滩位置下拉菜单
函数createDropDownMenu（）{
var query ='选择Beach_Location，Beach_ID FROM beachTable ORDER BY Beach_Location ASC';
var queryText = encodeURIComponent（query）;
var gvizQuery = new google.visualization.Query（
'http://www.google.com/fusiontables/gvizdata?tq='+ queryText）;
//发送查询并绘制包含响应数据的表
gvizQuery.send（function（response）{
var numRows = response.getDataTable（）。getNumberOfRows（）;
var numCols = response.getDataTable（）。getNumberOfColumns（）;
var name = ['< label style =font-weight：bold; font-size：16px> Select a Beach：< / label>< select id =beach_menustyle =font-size：16px;onchange =select_beach（this.options [this.selectedIndex] .value）;>< option class =defaultoptvalue => - All - < / option>'];
for（var i = 0; i< numRows; i ++）{
var nameValue = response.getDataTable（）。getValue（i，0）;
var idValue = response.getDataTable（）。getValue（i，1）;
name.push（< option value =+'+ idValue +'+>+ nameValue +< / option>）;
}
name.push（ < /选择>）;
document.getElementById（'beach_location_dropdown'）。innerHTML = name.join（''）;
}）;
$ b $ //结束createDropDownMenu函数
函数select_beach（val）{
$（＃beach_menu option [value ='+ val +''] ）.attr（'selected'，'selected'）;
if（val ===）{
resetMapExtent（）;
displayAllBeaches（）;
}
else {
update_layer（val）
}
} //结束select_beach函数
函数resetMapExtent（）{
google.maps.event.trigger（map，resize）;
map.setCenter（new google.maps.LatLng（53.760861，-98.813876））;
map.setZoom（5）;
} //结束resetMapExtent函数
//实现update_layer函数
函数update_layer（沙滩）{
infoWindow.close（）;
for（var z = 0; z
allMarkers [z] .setVisible（真正）;
} else {
//隐藏所有其他标记
allMarkers [z] .setVisible（false）;
}
}
} // end update_layer function
function displayAllBeaches（）{
infoWindow.close（）;
//显示所有标记
（var z = 0; z
allMarkers [z] .setVisible（真正）;
}
} // end displayAllBeaches
/ *启动映射初始化* /
函数initialize（）{
// map
latlng = new google.maps.LatLng（49.894634，-97.119141）;
var myOptions = {
center：latlng，
zoom：7，
mapTypeId：google.maps.MapTypeId.ROADMAP，
zoomControlOptions：{
style ：google.maps.ZoomControlStyle.SMALL
}，
mapTypeControl：true，
mapTypeControlOptions：{
mapTypeIds：[
google.maps.MapTypeId.ROADMAP，
google.maps.MapTypeId.SATELLITE，
google.maps.MapTypeId.HYBRID，
google.maps.MapTypeId.TERRAIN
]，
style：google .maps.MapTypeControlStyle.DROPDOWN_MENU
}，
overviewMapControl：true，
overviewMapControlOptions：{
打开：true
}
};
map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
//调用从这里开始
createDropDownMenu（）; //现在不工作
getBeachLocations（）;
// legend
map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push（
document.getElementById（ '传说'））;
var legend = document.getElementById（'legend'）;
var swim_icon =swim.jpg;
var div = document.createElement（'div'）;
div.innerHTML ='< h4>功能< / h4>'+
'< br />< img src ='+ swim_icon +'> '+海滩;
legend.appendChild（div）;
} //结束初始化函数
$（function（）{
$（'。view_normal'）。live（'click'，function（）{
$（。container）.css（width，930px）.css（margin，auto）;
$（。onewidecenter）。css（width （margin，auto）;
$（＃map_canvas）。css（width，930px）。css（margin，auto ）;
google.maps.event.trigger（map，resize）;
map.setCenter（new google.maps.LatLng（53.760861，-98.813876））;
map.setZoom （5）;
}）;
$（'。view_full_screen'）。live（'click'，function（）{
$（。container）。css （width，100％）。css（margin，auto）;
$（。onewidecenter）。css（width，100％）。css ，auto）;
$（＃map_canvas）.css（width，100％）.css（margin，auto）;
$（＃ （width，100％）。css（margin，auto）;
google.ma ps.event.trigger（map，resize）;
map.setCenter（new google.maps.LatLng（53.760861，-98.813876））;
map.setZoom（5）;
}）;
}）; // end page load
我已经包含了上面的示例代码。请特别注意我的点击事件处理程序。与往常一样，建议如何最好地解决这个问题将不胜感激。
预先感谢，
Michael
解决方案
jQuery AJAX方法是异步的。这意味着：
obj.success（function（data）{
ecoli_rows = data ['rows'];
}）; //结束成功
立即返回，但回调函数在ajax请求完成之前不会运行。 / p>
这意味着：
infoWindow.setContent（this.getHeader（ ）+''+
this.getEcoliData（）+''+ this.getAlgaeData（））;
infoWindow.open（map，this）; // ajax回调没有在这里解雇
在ajax请求完成之前用内容打开信息窗口。
为了更正，你可能会这样做：
在marker.getEcoliData中：
obj = getEcoliData（this.beach_id）;
return obj;
//在此点以下将处理移动到新方法
在click事件处理程序中：
google.maps.event.addListener（marker，'click'，function（）{
var ajaxObj = this .getEcoliData（）;
var marker = this;
ajaxObj.done（function（）{
infoWindow.setContent（marker.getHeader（）+''+
marker.afterGetEcoliData （）+''+
this.getAlgaeData（））;
infoWindow.open（map，this）;
$（。tabs）。tabs（{selected：0}） ;
））;
这不是一个完整的解决方案，因为您有两次异步调用。你可以链接它们，或者设置某种计数器，以确保回调仅在两者都完成时执行。
更好的方法是立即打开infowindow提供了一些信息来告诉用户数据正在被加载，然后在请求完成后，你就可以简单地完成再次更新infowindow内容（使用内容元素的句柄）以显示返回的数据。
How can I force google to redraw its infoWindow or atleast refresh its contents? I noticed that I must click twice on a marker before the correct data appears inside the infoWindow -maybe my closure here is the culprit.
var markers = new Array();
var allMarkers = new Array();
var infoWindow = new google.maps.InfoWindow();
var infoWindows = new Array();
// IE caches ajax request - need a way to clear cache with each fetch of data
randomize = function () {
var randomnumber = Math.floor(Math.random() * 100000);
return randomnumber;
}
function getBeachLocations() {
// construct query
var queryURL = "https://www.googleapis.com/fusiontables/v1/query?sql=";
var queryTail = "&key=apiKey&callback=?";
var query = "SELECT * FROM BeachTable"; // beach locations tbl
var queryText = encodeURI(query);
$.ajax({
type: "GET",
url: queryURL + queryText + queryTail,
cache: false,
dataType: 'jsonp',
success: createMarkers,
error: function () {
alert("Sorry, no spatial data is available at this time, please check back on a later date.");
}
});
} //end getBeachLocations
function createMarkers(data) { // =====================create markers
url = "http://swim.jpg";
var rows = data['rows'];
var ecoli_rows;
var algae_rows;
for (var m in rows) {
var ecoli_array = new Array();
var marker = new google.maps.Marker({
map: map,
icon: new google.maps.MarkerImage(url),
beach_id: rows[m][0],
beach_name: rows[m][1],
beach_region: rows[m][2],
position: new google.maps.LatLng(rows[m][4], rows[m][5]),
idx: m,
getHeader: function () {
var str = [
'<div style="width:650px;">',
'<div class="tabs">',
'<ul>',
'<li><a href="#tab-1" class="ecoli_tab"><span>E. Coli Data</span></a></li>',
'<li><a href="#tab-2" class="algae_data"><span>Algae Data</span></a></li>',
'</ul>',
'<div id="tab-1">',
'<h1>' + this.beach_name + '</h1>',
'<h3>' + this.beach_region + '</h3>'
].join('');
return str;
}, // end getHeader method
getEcoliData: function () { // begin getEcoliData
var obj;
obj = getEcoliData(this.beach_id);
return obj;
}, // end getEcoliData method
afterGetEcoliData: function (data) {
var ecoli_rows;
var ecoli_rows_str;
ecoli_rows = data['rows'];
var ecoli_rows_str = [
'<table id="ecoli_table " class="data" style="width:500px;">',
'<tr>',
'<th>Sample Date</th>',
'<th>Average E. coli Density <br/> (200 cfu/100 ml)</th>',
'<th>Recreational Water Quality Guideline</th>',
'</tr>'
].join('');
if (typeof ecoli_rows == 'undefined') {
ecoli_rows_str = '<p>Sorry no ecoli data currently exists for this beach.</p></div>'
} else {
for (var i = 0; i < ecoli_rows.length; i++) {
//console.log(rows[i]);
ecoli_rows_str += '<tr><td>' + formatDate(ecoli_rows[i][2]) + '</td><td>' + checkEcoliCount(ecoli_rows[i][3]) + '</td><td>' + ecoli_rows[i][4] + '</td></tr>';
}
ecoli_rows_str += '</table>'
ecoli_rows_str += '</div>';
// remove after test
ecoli_rows_str += '<div id="tab-2"><h1>nothing loaded</h1></div></div></div>';
} //end if
return ecoli_rows_str;
}, // end outPutEcoliData method
getAlgaeData: function () { // begin getAlgaeData
var obj;
var algae_rows_str = [
'<div id="tab-2">',
'<h1>' + this.beach_name + '</h1>',
'<h3>' + this.beach_region + '</h3>',
'<table id="algae_table " class="data" style="width:500px;">',
'<tr>',
'<th>Sample Date</th>',
'<th>Algal Toxin Microcystin <br/> (20 ug/L)</th>',
'<th>Recreational Water Quality Guideline</th>',
'<th>Blue Green Algae Cells <br/>(100,000 cells/ml)</th>',
'<th>Recreational Water Quality Guideline</th>',
'</tr>'
].join('');
obj = getAlgaeData(this.beach_id);
return obj;
}, // end getAlgaeData method
outPutAlgaeData: function (data) {
obj.done(function (data) {
algae_rows = data['rows'];
}); // end success
//console.log(algae_rows);
if (typeof algae_rows === 'undefined') {
algae_rows_str = [
'<div id="tab-2">',
'<h1>' + this.beach_name + '</h1>',
'<h3>' + this.beach_region + '</h3>',
'<p>Sorry no algae data exists for this beach.</p>',
'</div>',
'</div>',
'</div>',
'</div>'
].join('');
} else {
for (var i = 0; i < algae_rows.length; i++) {
//console.log(rows[i]);
algae_rows_str += '<tr><td>' + formatDate(algae_rows[i][2]) + '</td><td>' + checkAlgaeToxinCount(algae_rows[i][3]) + '</td><td>' + algae_rows[i][4] + '</td><td>' + checkAlgaeCount(algae_rows[i][5]) + '</td><td>' + algae_rows[i][6] + '</td></tr>';
}
algae_rows_str += '</table>'
algae_rows_str += '</div></div></div>';
//return algae_rows_str;
} //end if
return algae_rows_str;
} // end outPutAlgaeData
}); // ====================end marker
allMarkers.push(marker); //required for drop down menu
console.log(marker.beach_id + " " + marker.beach_name);
// click event handler
google.maps.event.addListener(marker, 'click', function () {
var ajaxObj = this.getEcoliData();
var marker = this;
var str;
// add loading gif
//infoWindow.setContent('<img src="../img/loading.gif" alt="loading data"/>');
ajaxObj.done(function (data) {
/*
str = marker.getHeader() + marker.afterGetEcoliData(data);
console.log(str);
*/
infoWindow.setContent(marker.getHeader() + '' + marker.afterGetEcoliData(data));
infoWindow.open(map, this);
$(".tabs").tabs({ selected: 0 });
}); // End done
}); // End click event handler
} // end for loop foreach marker
checkAdvisory(); // determine where this needs to be called from.
} //end function createMarkers
// format date as January 1, 2013
function formatDate(num) {
var d = Date.parse(num).toString('MMMM d, yyyy');
return d;
}
// check ecoli count - anything greater than or equal to 200 cfu/100ml is flagged
function checkEcoliCount(num) {
var str;
num = parseFloat(num);
if (num >= 200) {
str = '<span class="ecoliCount_on" style="color:orange"><b>' + num + '</b></span>';
} else {
return num;
}
return str;
}
// check blue green algae count - anything greater than or equal to 100,000 cells/ml is flagged
function checkAlgaeCount(num) {
var str;
num = parseFloat(num);
if (num >= 100000) {
str = '<span class="algaeCount_on" style="color:orange"><b>' + num + '</b></span>';
} else {
return num;
}
return str;
}
// check algae toxin microcystin - anything greater than or equal to 20 ug/L is flagged
function checkAlgaeToxinCount(num) {
// why include < ? - ask Cassie
var str;
var idx;
idx = num.indexOf("<");
num = num.substring(idx + 1);
num = parseFloat(num);
if (num >= 20) {
str = '<span class="algaeToxinCountOn" style="color:orange"><br>' + num + '</b></span>';
} else {
return num;
}
return str;
}
function checkAdvisory() {
/* add advisory images
ecoliCount_on
algaeCount_on
algaeToxinCountOn
*/
$(".ecoliCount_on").each(function (i, v) {
console.log(i, v);
$(this).css("color", "green");
});
$(".algaeCount_on").each(function (i, v) {
console.log(i, v);
$(this).css("color", "green");
});
$(".algaeToxinCountOn").each(function (i, v) {
console.log(i, v);
$(this).css("color", "green");
});
}
function getEcoliData(beach_id) {
//console.log(beach_id);
var rows;
var queryURL = "https://www.googleapis.com/fusiontables/v1/query?sql=";
var queryTail = '&key=apiKey&callback=?';
var whereClause = "WHERE 'Beach_ID' = " + beach_id;
var query = "SELECT * FROM EcoliTable "
+ whereClause + " ORDER BY 'Sample_Date' DESC";
var queryText = encodeURI(query);
var ecoli_array = new Array();
return $.ajax({
type: "GET",
url: queryURL + queryText + queryTail,
cache: false,
dataType: 'jsonp'
});
}
function getAlgaeData(beach_id) {
var queryURL = "https://www.googleapis.com/fusiontables/v1/query?sql=";
var queryTail = '&key=apiKey&callback=?';
var whereClause = " WHERE 'Beach_ID' = " + beach_id;
var query = "SELECT * FROM algaeTable "
+ whereClause + " ORDER BY 'Sample_Date' DESC";
var queryText = encodeURI(query);
// ecoli request
return $.ajax({
type: "GET",
url: queryURL + queryText + queryTail,
cache: false,
dataType: 'jsonp'
});
}
// create beach locations dropdown
function createDropDownMenu() {
var query = 'SELECT Beach_Location, Beach_ID FROM beachTable ORDER BY Beach_Location ASC';
var queryText = encodeURIComponent(query);
var gvizQuery = new google.visualization.Query(
'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//Send query and draw table with data in response
gvizQuery.send(function (response) {
var numRows = response.getDataTable().getNumberOfRows();
var numCols = response.getDataTable().getNumberOfColumns();
var name = ['<label style="font-weight:bolder;font-size:16px"> Select a Beach:</label><select id="beach_menu" style="font-size:16px;" onchange="select_beach(this.options[this.selectedIndex].value);"><option class="defaultopt" value="">--All--</option>'];
for (var i = 0; i < numRows; i++) {
var nameValue = response.getDataTable().getValue(i, 0);
var idValue = response.getDataTable().getValue(i, 1);
name.push("<option value=" + "'" + idValue + "'" + ">" + nameValue + "</option>");
}
name.push('</select>');
document.getElementById('beach_location_dropdown').innerHTML = name.join('');
});
} // end createDropDownMenu Function
function select_beach(val) {
$("#beach_menu option[value='" + val + "']").attr('selected', 'selected');
if (val === "") {
resetMapExtent();
displayAllBeaches();
}
else {
update_layer(val)
}
} // end select_beach function
function resetMapExtent() {
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(53.760861, -98.813876));
map.setZoom(5);
} // end resetMapExtent function
// implement update_layer function
function update_layer(beach) {
infoWindow.close();
for (var z = 0; z < allMarkers.length; z++) {
if (beach === allMarkers[z].beach_id) {
allMarkers[z].setVisible(true);
} else {
// hide all other markers
allMarkers[z].setVisible(false);
}
}
} // end update_layer function
function displayAllBeaches() {
infoWindow.close();
// show all markers
for (var z = 0; z < allMarkers.length; z++) {
// hide all markers
allMarkers[z].setVisible(true);
}
} // end displayAllBeaches
/* start map initialization */
function initialize() {
// map
latlng = new google.maps.LatLng(49.894634, -97.119141);
var myOptions = {
center: latlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN
],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
overviewMapControl: true,
overviewMapControlOptions: {
opened: true
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// invocation begins here
createDropDownMenu(); // not working now.
getBeachLocations();
// legend
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
document.getElementById('legend'));
var legend = document.getElementById('legend');
var swim_icon = "swim.jpg";
var div = document.createElement('div');
div.innerHTML = '<h4>Features</h4>' +
'<br/><img src="' + swim_icon + '"> ' + "Beaches";
legend.appendChild(div);
} // end initialization function
$(function () {
$('.view_normal').live('click', function () {
$(".container").css("width", "930px").css("margin", "auto");
$(".onewidecenter").css("width", "930px").css("margin", "auto");
$("#map_canvas").css("width", "930px").css("margin", "auto");
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(53.760861, -98.813876));
map.setZoom(5);
});
$('.view_full_screen').live('click', function () {
$(".container").css("width", "100%").css("margin", "auto");
$(".onewidecenter").css("width", "100%").css("margin", "auto");
$("#map_canvas").css("width", "100%").css("margin", "auto");
$(" #dropdown_container").css("width", "100%").css("margin", "auto");
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(53.760861, -98.813876));
map.setZoom(5);
});
}); // end page load
I have included the sample code above. Please pay special attention to my click event handler. As always, as suggestions on how best to remedy this would be greatly appreciated.
Thanks in advance, Michael
解决方案
jQuery AJAX methods are asynchronous. That means:
obj.success(function (data) {
ecoli_rows = data['rows'];
}); // end sucess
Returns immediately but the callback function doesn't run until the ajax request completes.
This means that:
infoWindow.setContent(this.getHeader() + '' +
this.getEcoliData() + '' + this.getAlgaeData());
infoWindow.open(map, this); //ajax callback hasn't fired here
opens the info window with the content BEFORE the ajax request completes.
To correct, you might do something like this:
In marker.getEcoliData:
obj = getEcoliData(this.beach_id);
return obj;
// move processing below this point to new method
And in the click event handler:
google.maps.event.addListener(marker, 'click', function () {
var ajaxObj = this.getEcoliData();
var marker = this;
ajaxObj.done(function() {
infoWindow.setContent(marker.getHeader() + '' +
marker.afterGetEcoliData() + '' +
this.getAlgaeData());
infoWindow.open(map, this);
$(".tabs").tabs({ selected: 0 });
});
This is not a complete solution since you have two asynchronous calls happening. You could either chain them, or set some kind of counter to make sure that the callback only executes when both have completed.
An even better approach would be to immediately open the infowindow with some kind of information to tell the user that data is being loaded. Then after the requests complete, you simply update the infowindow content again (with a handle to the content element) to show the returned data.
这篇关于强制Google InfoWindow重新绘制自己或刷新其内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
