javascript – 如何在OpenLayers中向向量添加弹出框？

在我的程序的先前版本中,我使用标记来标记地图上的点.在当前版本中,我不得不从标记更改为向量,因为我需要额外的灵活性.在标记解决方案中,我使用下面的函数向标记添加一个弹出框：

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

但它不再适用于矢量,因为它们没有事件属性.我该如何解决？

解决方法

实际上,官方的做法如下：

(注意：某些变量尚未在这些片段中声明：longt,lat,map)

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

javascript – 如何在OpenLayers中向向量添加弹出框？

解决方法

猜你在找的JavaScript相关文章