Javascript 如何在 OpenLayers 中向矢量添加弹出框？

How to add a popup box to a vector in OpenLayers?

提问by xsl

In a previous version of my program I used markersto mark points on the map. In the current version I had to change from markersto vectors, because I need the extra flexibility. In the markers solution I used the function below to add a popup-box to a marker:

在我以前的程序版本中，我曾经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;
}

But it is no longer working for vectors, because they have no eventsproperty. How do I fix this?

但它不再为 工作vectors，因为他们没有events财产。我该如何解决？

采纳答案by xsl

Solved by myself. Here is how:

自己解决了。方法如下：

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

Add a SelectFeature

添加选择功能

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

Event handlers

事件处理程序

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;
}

Store the content of the popup in the vector's name. There may be a better solution, but I don't care. Adding popups to vectors is already difficult enough.

将弹出窗口的内容存储在向量的名称中。可能有更好的解决方案，但我不在乎。向向量添加弹出窗口已经足够困难了。

vector.name = "Your popup content";

回答by Hugh Pearse

Actually the official way of doing it is the following:

其实官方的做法是这样的：

(Note: some of the variables have not been declared in these snippets: longt, lat, map)

（注意：一些变量在这些片段中没有被声明：longt、lat、map）

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

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);