gpt4 book ai didi

javascript - 将动态内容注入(inject)表格中的 Google map 信息窗口

转载 作者:行者123 更新时间:2023-11-30 06:39:21 25 4
gpt4 key购买 nike

我很难让 Google Maps V3 中的信息窗口按照我希望的方式工作。

- 场景:- 我正在旧金山的地铁系统和 Google map 之间创建混搭。在一项功能中,当用户选择一条路线时,标记(代表站点)将叠加在 map 上。单击标记时,会打开一个信息窗口,其中将显示车站名称、路线名称(以该路线的颜色为背景)和一个无边框表格,其中将显示该特定车站列车运行的预计到达时间(基本上,只是“分钟”,直到前往特定目的地的火车离开)。显然,当用户点击不同的标记时,该站的相应数据会反射(reflect)在信息窗口中。

返回 JSON 格式 ETD 数据的服务器端脚本一切正常,我正在按需接收数据。

- 问题:- 我无法将 ETD 数据正确地“注入(inject)”到我的信息窗口中,我想以漂亮的表格格式显示它,但由于某种原因,所有 ETD 数据只是没有注入(inject)到表中,而是溢出到表外。

如果有任何建议、帮助等,我将不胜感激。

谢谢,

-Soumya 罗伊

代码:-

function drawinfo(mark,abbr,name) {
var infowindow=new google.maps.InfoWindow();
var strContent="<div style=\"width:400px;height:240px;\">
<div style=\"font-weight:bold;padding:0.5em;\"><p>Station:"+name+"</p></div><br/>
<div style=\"margin-top:0.3em;background-color:"+Clr+";float:left;font-size:0.8em;
font-weight:bold;\"><p>Route:"+Rt+"</p></div><div style=\"float:right;\">
<table style=\"border:0;color:#666;\"><tr><td>Departures</td></tr>"; //Until here the infowindow shows properly.

$.getJSON("getetd.php",{abbr:abbr},function(result) {
$.each(result,function(key,value) {
$.each(this,function(k,v) {
strContent+="<tr><td>|"+k+"</td>"; //The actual JSON data is being received properly.
$.each(this,function(k2,v2) {
$.each(this,function(k3,v3) {
strContent+="<td>"+v3+"</td>"; //Neither "k" nor "v3" get injected.
});
});
strContent+="</tr>";
});
});
}); //getJSON() ends

strContent+="</table></div></div>";
google.maps.event.addListener(mark,'click',function(){
infowindow.close(); // So as to close any other infowindow.
infowindow.setContent(strContent);
infowindow.open(map,mark);
}); //addListener() ends.

} //drawinfo() ends.

最佳答案

您的 JSON 获取是异步的,您需要使用回调例程中返回的数据,现在您的关闭 </table></div></div>在回调函数之外(我认为)。

我怀疑您想要的是在调用点击监听器(单击标记)时获取该特定信息窗口的数据,而不是预先填充数据,因此在点击监听器中调用 getJSON 函数,然后打开从服务器返回时带有数据的信息窗口(在 getJSON 回调中)。

关于javascript - 将动态内容注入(inject)表格中的 Google map 信息窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12608237/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com