在移动开放层中创建弹出窗口

时间:2013-10-12 19:06:55

标签: javascript mobile popup openlayers

我正在尝试使用openlayer的移动版本,遗憾的是我无法在其中使用framedcloud,我只能创建一个方形弹出窗口看起来不太美观,除了主要需要是从相关的云中识别数据点使弹出方块没用,少用jquery或其他库..

我们使用square的方式是导入弹出窗口openlayers库,但这个技巧不适用于framedcloud(firebug说“OpenLayers.Popup.FramedCloud不是构造函数”)

<link rel="stylesheet" href="../scripts/OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" >
....

<script type="text/javascript" language="javascript" src="../scripts/OpenLayers-2.13.1/OpenLayers.mobile.js"></script>
<script type="text/javascript" la language="javascript" src="../Scripts/OpenLayers-2.13.1/lib/OpenLayers/Popup.js"></script>

.....

function putPopup(x, y, html,map) {
        // alert("popup1"+x+" "+y+" "+html)
        map.setCenter(new OpenLayers.LonLat(x, y));

        if (popup) {
            map.removePopup(popup);
        }
        // this.popup = new OpenLayers.Popup("chicken",
                // new OpenLayers.LonLat(x, y), null, html, null, true);


//-------------------------Fail-------------------------------------                

        //popup = new OpenLayers.Popup("chicken",
//                                 new OpenLayers.LonLat(x, y),
//                                 new OpenLayers.Size(120,50),
//                                 html,
//                                 true);


//-------------------------Fail-------------------------------------                                                 
        popup = new OpenLayers.Popup.FramedCloud("Popup", 
            new OpenLayers.LonLat(x, y), null,
            html, null,
            true // <-- true if we want a close (X) button, false otherwise

        );              

//-------------------------Fail-------------------------------------                         

         //var myPopupClass = new OpenLayers.Class
//              (
//                  OpenLayers.Popup.FramedCloud,
//                  {
//                      'autoSize': true,
//                      'maxSize': new OpenLayers.Size(500,500)
//                  }       
//              );
//      

        // var myPopup = new myPopupClass
//                              (
//                                  "chicken",                                      
//                                  new OpenLayers.LonLat(x, y),
//                                  null,
//                                  html,
//                                  null,
//                                  true
//                              );
//                              map.addPopup(myPopup);  




        map.addPopup(popup);

    };

1 个答案:

答案 0 :(得分:0)

其移动版本中的openlayer默认不支持弹出窗口,因此您必须创建包含弹出文件的自己的编辑,see http://docs.openlayers.org/library/deploying.html

我所做的是在mobile.cfg中包含以下几行

OpenLayers / Popup.js
OpenLayers / Popup / Framed.js
OpenLayers / Popup / Framed.js
OpenLayers / Popup / FramedCloud.js
OpenLayers / Popup / Anchored.js
OpenLayers / Popup / AnchoredBubble.js