Question

我正在使用OpenLayer弹出窗口。初始化时，需要一个参数来包含弹出窗口中显示的html。这个参数是javascript string。

我有冲突，一方面html文本很长，所以我更喜欢将它放在html文件中并将文件读取到变量。

另一方面，html依赖于其他局部变量，所以如果我把它放在它的位置，我可以连接一些字符串和局部变量来组成包含html文本的最终变量。但这是一个非常漫长而丑陋的代码...

也许有经验的javascript程序员可以帮我找到解决这个问题的设计方案吗？

感谢

Answer 1

在使用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。

Answer 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请求后，您可以创建弹出窗口并使用先前加载的文件内容填充它。

Answer 3

我建议使用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});

在弹出窗口中管理Html文本

3 个答案: