我正在使用OpenLayer弹出窗口。 初始化时,需要一个参数来包含弹出窗口中显示的html。 这个参数是javascript string。
我有冲突,一方面html文本很长,所以我更喜欢将它放在html文件中并将文件读取到变量。
另一方面,html依赖于其他局部变量,所以如果我把它放在它的位置,我可以连接一些字符串和局部变量来组成包含html文本的最终变量。但这是一个非常漫长而丑陋的代码...
也许有经验的javascript程序员可以帮我找到解决这个问题的设计方案吗?
感谢
答案 0 :(得分:2)
在使用OpenLayers时,您可以使用OpenLayers.loadURL函数从服务器检索HTML。
http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Ajax-js.html
如果要将局部变量传递给服务器端HTML,可以设置一个接受变量的简单处理程序,并将这些变量集成到一些静态HTML中(使用字符串格式或模板)。
如果您使用的是.NET,则.ashx文件可以执行此操作。有关示例,请参阅http://dotnetperls.com/ashx。
答案 1 :(得分:2)
另一种解决方案是使用Ajax请求加载文件,然后在弹出窗口中打印内容。
使用JQuery:
$.get('myfile.php',function(content){
var popup = new OpenLayers.Popup("popupid",
new OpenLayers.LonLat(mouseX,mouseY),
new OpenLayers.Size(360,200),
content,
true);
map.addPopup(popup);
});
完成Ajax请求后,您可以创建弹出窗口并使用先前加载的文件内容填充它。
答案 2 :(得分:0)
我建议使用geographikas解决方案,并尝试使用不同的js类来提高可维护性和可读性。不要在同一个对象中执行所有操作,创建自己的继承或使用OpenLayers.Popup.Anchored等的弹出对象,并从那里进行Ajax服务器调用。这样你就不会混淆你的其他代码了。还可以在需要时轻松重复使用和替换。
我会选择这样的事情(未经测试!):
mynamespace.mypopup = function(o) {
var size = new OpenLayer.Size(100, 70);
var icon = new OpenLayers.Icon(); // Fill it
var popup = new OpenLayers.Popup.Anchored(o.id, o.lonlat, size, getContent(), icon, false, null);
var getContent = function() {
// ajax call
// return a string
}
return popup;
}
在名为“mypopup.js”的文件中
并将其命名为:
var popup = new mynamespace.mypopup({id: 'whatever', lonlat: myLonLat});