Openlayers Customizing Simple Popup

Many types of popup can be used in openlayers, and you can see it in the Openlayers popupmatrix.html example. There was a mistake before: Popup and marker are bound, and there must be marker to have a popup. And then recently in order to achieve the same demand: Click in the grid of the graph to generate a simple popup with just a little bit of information that doesn't require as much content as nestpupop in other projects. After their own groping, finally realized. First show the following:

The implementation method is not difficult, mainly as follows:

1. Add a click event to a Map object

Map.events.register (' Click ', Map, function (e) {               var position = Map.getlonlatfrompixel (e.xy);               Dealwithmapclick (position);           });

　　

2. Map Click event Handling, Dealwithmapclick

/Add action on the map Bubble 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 (' n ', 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 Content Fill

 /* Fill Popup's contents */function Getpopupcon () {var str = ' <div id= ' selectedareapopup ' > ' ' <div class=areapopuphead> ' data.name ' &LT;/DIV&G                              t; '                                      ' <div class= ' areapopupitem ' > ' <div class= ' left ' > ' '  ' &l T;/div> ' <div class= "right" > "&LT;LABEL&G                              t; View reports </label> ' </div> ' </div> ' ' <div class= ' Areapopupitem abled ' > ' <div class= ' left ' > " '                                  ' </div> ' <div class= ' right ' > '                              ' <label> close bubbles </label> ' </div> '                        ' </div> ' <div id= "noreporttips" > Report construction, cannot view </div> '        ' </div> '; return str;}

　　

This effect is relatively nestpupop, and the proportions are simple. No anchor point, only suitable for simple use.

Openlayers Customizing Simple Popup