Openlayers Learning Notes 6--using jquery UI to implement queries and annotations (feature implementation chapter)

This blog post is about openlayers map callout and pop-up window (marker+popup), first look at:

Here is the code, all written in comments, do not explain too much:

Add Tag function Addmarke (x, y, attribute) {//Set marker style var Style_mark = OpenLayers.Util.extend ({}, Openlayers.featu Re.    vector.style[' default ');    Style_mark.graphicwidth = 64;    Style_mark.graphicheight = 64;    style_mark.externalgraphic = "Img/marker/tax.png";    style_mark.fillopacity = 0.5;    style_mark.graphicopacity = 1;     /* Style_mark.title = title;    *////Create a vector feature based on coordinate points and styles var point = new OpenLayers.Geometry.Point (x, y);    var pointfeature = new OpenLayers.Feature.Vector (point, NULL, Style_mark);    Pointfeature.attributes = attribute;        Create a callout layer (vector layer) if (Markerlayer = = null) {Markerlayer = new OpenLayers.Layer.Vector ("Markevector");    Map.addlayers ([Markerlayer]);    }//Add vector features to the callout layer markerlayer.addfeatures ([pointfeature]); Create a control that selects features (binding with marker, selecting features from the Markerlayer layer) if (Selectcontrol = = null) {Selectcontrol = new Openlayers.cont Rol.         Selectfeature (Markerlayer, {hover:false,       Onselect:onfeatureselect, onunselect:onfeatureunselect});        Map.addcontrol (Selectcontrol);    Selectcontrol.activate ();        }}//clears all marked function Clearallmarke () {if (Selectcontrol! = null) {Map.removecontrol (Selectcontrol);        Destroy this object Selectcontrol.deactivate ();    Selectcontrol = null;        } if (Markerlayer! = null) {Map.removelayer (Markerlayer);    Markerlayer = null;    }}//Create popup to display the Htmlfunction createcontenthtml (feature) {var attr = feature.attributes;    var contenthtml = "<div style= ' text-align:center;background-color:white ' >"; for (Var b in attr) {contenthtml + = B + ":" + "<textarea id= ' attributevalue ' style= ' height 30px;font-size: 14px;text-align:center;vertical-align:middle;align-content:center ' > + attr[b] + "</textarea>" + "</br    > "; } return contenthtml + "</div>";} Feature Check Event response function Onfeatureselect (Feature) {Selectedfeature = feature;    var featureattribute = feature.attributes;    var popupcontent = createcontenthtml (feature); Popup = new OpenLayers.Popup.CSSFramedCloud (null,//ID Feature.geo Metry.getbounds (). Getcenterlonlat (),//popup location null,//contentsize:popup content                                          Size popupcontent,//contenthtml:popup display content, HTML character null, True,                                 CloseBox: Whether to show the off button onpopupclose);    Closeboxcallback: Close button Event Feature.popup = popup; Map.addpopup (popup);} Close the pop-up window function Onpopupclose (evt) {selectcontrol.unselect (selectedfeature);}    Feature Uncheck Event response function Onfeatureunselect (feature) {map.removepopup (feature.popup);    Feature.popup.destroy (); Feature.popup = null;}

Call-Time Code:

var Lonlat = Cortransform (120.48299, 36.1129);    var lonlatstr = lonlat.toshortstring ();    var Lonlatarr = Lonlatstr.split (",");    var lon = lonlatarr[0];    var lat = lonlatarr[1];    var att = {        name: "Qingdao second Middle school, Shandong Province",        Address: "No. 70th, Laoshan District Road, Qingdao, Shandong Province",        Tel: "0532-88907255",        Category: "Education school: Middle School"    };    Addmarke (lon, LAT, att);

The next thing to do is to query the data from the database to add annotation on the map in batches. This article references the blog: "Openlayers" CSS3-style popups

Openlayers Learning Notes 6--using jquery UI to implement queries and annotations (feature implementation chapter)