Openlayers自定義簡單popup

OpenLayers中可以使用很多種類型的popup,大家可以到Openlayers的 popupMatrix.html示例中看。之前存在這樣一個錯誤的想法：popup和marker是綁定的，要有popup就必須有marker。然后最近為了實現這樣一樣需求：在接圖表的網格中點擊，產生相應的一個簡單的popup只有一個些簡單的信息，不需要和其他項目中的nestpupop那么多的內容。經過自己的摸索后，終於實現。先展示下效果圖：

實現方法不難，主要如下：

 

1.給地圖map對象添加click事件

map.events.register('click', map, function (e) {
               var position = map.getLonLatFromPixel(e.xy);
               dealwithMapClick(position);
           });

　　

2.地圖點擊事件處理，dealwithMapClick 

/在地圖上添加操作的氣泡
function dealwithMapClick(pos){
                var lonlat = new OpenLayers.LonLat(pos.lon, pos.lat);
                var size=new OpenLayers.Size(110,155);
                var popup = new OpenLayers.Popup.Anchored('12', lonlat, size, getPopupCon(), null, false, null);
                var popups = map.popups;
                for (var i = 0; i < popups.length; i  ) {
                    popups[i].destroy();
                }
                map.addPopup(popup);
                initPopupBtnEvents();
}

　　

3.popup內容填充

 /*填充popup的內容*/
    function getPopupCon() {
        var str = '<div id="selectedAreaPopup">'  
                            '<div class=areaPopupHead>'  
                                data.name  
                            '</div>'  
                            '<div class="areaPopupItem">'  
                                '<div class="left">'  
                                    '<img src="'   baseUrl   'Content/images/indexMap/showReport.png"/>'  
                                '</div>'  
                                '<div class="right">'  
                                    '<label>查看報告</label>'  
                                '</div>'  
                            '</div>'  
                            '<div class="areaPopupItem abled">'  
                                 '<div class="left">'  
                                    '<img src="'   baseUrl   'Content/images/indexMap/closePopup.png"/>'  
                                '</div>'  
                                '<div class="right">'  
                                    '<label>關閉氣泡</label>'  
                                '</div>'  
                            '</div>'  
                            '<div id="noReportTips">報告建設中，不可查看</div>'  
                      '</div>';
        return str;
}

　　

這個效果相對nestpupop來說，比例簡單。沒有錨點，只能適合簡單的使用。