2

类中的SelectFeature方法Control提供了一种通过监听事件featureselected和featureunselected分别在 Vector 层上添加和删除弹出窗口的方法。下面显示了我从openlayers 网站的示例中获得的示例代码：

// create the layer with listeners to create and destroy popups
var vector = new OpenLayers.Layer.Vector("Points",{
 eventListeners:{
  'featureselected':function(evt){
   var feature = evt.feature;
   var popup = new OpenLayers.Popup.FramedCloud("popup",
    OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
    null,
    "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Foo: </div>",
    null,
    true
   );
   feature.popup = popup;
   map.addPopup(popup);
  },
  'featureunselected':function(evt){
   var feature = evt.feature;
   map.removePopup(feature.popup);
   feature.popup.destroy();
   feature.popup = null;
  }
 }
});

vector.addFeatures(features);

// create the select feature control
var selector = new OpenLayers.Control.SelectFeature(vector,{
 hover:true, # this line
 autoActivate:true
});

上面的代码将允许在将鼠标悬停在 Geometry 对象（地图上的图标或标记）上时显示弹出窗口。如果hover:true删除了该线，则仅在鼠标单击 Geometry 对象时才会显示弹出窗口。

我想要的是能够在鼠标悬停时显示一种类型的弹出窗口（例如，图像加标题）和在鼠标单击时显示另一种类型（例如，详细描述）。我不确定如何做到这一点。一些帮助将不胜感激。谢谢。

4

1 回答 1

3

此外，还有另一种方式，它比正确使用 API 更像是 hack，但似乎有效。您可以覆盖和覆盖回调。

var selectControl = new OpenLayers.Control.SelectFeature(vectorLayer, {

    callbacks: {
        over: function(feat) {
            console.log('Show popup type 1');
        },
        out: function(feat) {
            console.log('Hide popup type 1');
        }
    },

    eventListeners: {
        featurehighlighted: function(feat) {
            console.log('Show popup type 2');
        },
        featureunhighlighted: function(feat) {
            console.log('Hide popup type 2');
        }
    }    
});

这是工作示例：http: //jsfiddle.net/eW8DV/1/

查看选择控件的源代码以了解详细信息。

于 2012-11-07T17:40:44.410 回答