Question

我使用带矢量图层的OpenLayers来显示地图上的不同项目。

最重要的是，我想为每个项目（一个功能）添加一个弹出窗口（当点击项目时显示弹出窗口）。要做到这一点，我有：

function initMap()
    {
     // In this function I add with success the different items to the vectorLayer.
    }

    function finishMap()
    {

        map.addLayer(vectorLayer);

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

    function onFeatureClose(evt) {
        selectControl.unselect(selectedFeature);
    }

    function onFeatureSelect(feature) {
        var popup = new OpenLayers.Popup.FramedCloud("popup",
            feature.geometry.getBounds().getCenterLonLat(),
            null,
            feature.description,
            true,
            onFeatureClose);
        popup.panMapIfOutOfView = true;
        popup.autoSize = true;
        feature.popup = popup;

        map.addPopup(popup);
    }

    function onFeatureUnselect(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }

对不同功能的要求是：

initMap（）;
finishMap（）;

问题是：我只有一个项目（超过10个）点击它弹出一个...

Answer 1

通常，将选择处理程序直接实现到图层对象更容易，这是（我猜）在initMap方法中。使用eventListeners属性，如下所示：

    var layer = new OpenLayers.Layer.Vector("Vector layer", { 
        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: " + feature.attributes.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;
            }
        }
    });

//create selector control
var selector = new OpenLayers.Control.SelectFeature(layer,{
        autoActivate:true
    });

示例实现：http://openlayers.org/dev/examples/light-basic.html，唯一的区别是selecotr对鼠标悬停和mouseout做出反应，而不是单击（通过将选择器的悬停属性设置为true来完成）。

另外，关于SO的一个非常相似的问题：How to add a popup box to a vector in OpenLayers?。

有关课程的详细信息，请参阅OL文档：http://dev.openlayers.org/docs/files/OpenLayers-js.html 或者要求离开。

希望至少有一些有帮助。

Vector OpenLayers上只有一个弹出窗口

1 个答案: