ओपनलेयर में वेक्टर में पॉपअप बॉक्स कैसे जोड़ें?

Question

मेरे कार्यक्रम के पिछले संस्करण में मैंने मानचित्र पर अंक चिह्नित करने के लिए markers का उपयोग किया था। मौजूदा संस्करण में मुझे markers से vectors में बदलना पड़ा, क्योंकि मुझे अतिरिक्त लचीलापन की आवश्यकता है। मार्कर समाधान में मैं एक मार्कर के लिए एक पॉपअप बॉक्स जोड़ने के लिए नीचे समारोह का प्रयोग किया:

function createPopupBoxFeature(vector, lonLat, description) { 
    var feature = new OpenLayers.Feature(vector, lonLat); 

    feature.closeBox = true; 
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, 
     { "autoSize": true }); 
    feature.data.popupContentHTML = description; 

    vector.events.register("mousedown", feature, function(evt) { 
     if (this.popup == null) { 
      this.popup = this.createPopup(this.closeBox); 
      map.addPopup(this.popup); 
      this.popup.show(); 
     } else { 
      this.popup.toggle(); 
     } 
     OpenLayers.Event.stop(evt); 
    }); 

    return feature; 
} 

लेकिन यह नहीं रह गया है vectors के लिए काम कर रहा है, क्योंकि उन पर कोई events संपत्ति है। मैं यह कैसे तय करुं?

Answer 1

स्वयं द्वारा हल किया गया।

// Used to display the dialog popup 
var selectControl; 
var selectedFeature; 

एक SelectFeature

selectControl = new OpenLayers.Control.SelectFeature(vectorLayer, 
    { 
     onSelect: onFeatureSelect, 
     onUnselect: onFeatureUnselect 
    }); 
    map.addControl(selectControl); 
    selectControl.activate(); 

घटना संचालकों

function onPopupClose(evt) { 
    selectControl.unselect(selectedFeature); 
} 
function onPopupFeatureSelect(feature) { 
    selectedFeature = feature; 
    popup = new OpenLayers.Popup.FramedCloud("chicken", 
     feature.geometry.getBounds().getCenterLonLat(), 
     null, feature.name, null, true, onPopupClose); 
    popup.panMapIfOutOfView = true; 
    popup.autoSize = true; 
    feature.popup = popup; 
    map.addPopup(popup); 
} 
function onPopupFeatureUnselect(feature) { 
    map.removePopup(feature.popup); 
    feature.popup.destroy(); 
    feature.popup = null; 
} 

स्टोर वेक्टर के नाम पर पॉपअप की सामग्री जोड़ें: यहां बताया गया है। एक बेहतर समाधान हो सकता है, लेकिन मुझे परवाह नहीं है। वैक्टर में पॉपअप जोड़ना पहले से ही काफी मुश्किल है।

vector.name = "Your popup content"; 

Answer 2

वास्तव में यह कर की आधिकारिक रास्ता निम्नलिखित है:

(नोट: चर के कुछ इन स्निपेट में घोषित नहीं किया गया है: longt, अक्षां, नक्शे)

http://dev.openlayers.org/examples/light-basic.html

//Step 1 - create the vector layer 
var vectorLayer = new OpenLayers.Layer.Vector("ExampleLayer",{ 
    eventListeners:{ 
     'featureselected':function(evt){ 
      var feature = evt.feature; 
      var popup = new OpenLayers.Popup.FramedCloud("popup", 
       OpenLayers.LonLat.fromString(feature.geometry.toShortString()), 
       null, 
       feature.attributes.message+"<br>"+feature.attributes.location, 
       null, 
       true, 
       null 
      ); 
      popup.autoSize = true; 
      popup.maxSize = new OpenLayers.Size(400,800); 
      popup.fixedRelativePosition = true; 
      feature.popup = popup; 
      map.addPopup(popup); 
     }, 
     'featureunselected':function(evt){ 
      var feature = evt.feature; 
      map.removePopup(feature.popup); 
      feature.popup.destroy(); 
      feature.popup = null; 
     } 
    } 
}); 

//Step 2 - add feature to layer 
var p = new OpenLayers.Geometry.Point(longt, lat); 
var feature = new OpenLayers.Feature.Vector(
    p.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 
    {message:'foo', location:'bar'}, 
    {externalGraphic: '../img/marker.png', graphicHeight: 21, graphicWidth: 16} 
); 
vectorLayer.addFeatures(feature); 

//Step 3 - create the selectFeature control 
var selector = new OpenLayers.Control.SelectFeature(vectorLayer,{ 
    hover:true, 
    autoActivate:true 
}); 

//Step 4 - add the layer and control to the map 
map.addControl(selector); 
map.addLayer(vectorLayer);