使标记可拖动和可点击

Question

我有一个矢量图层,用于在我的地图上显示标记作为特征,但现在我不知道,我做什么,它们是可以拖拽或可点击的.我能做些什么来获得两者？

/*** Init Drag Marker
*/
    var dragFeature = new OpenLayers.Control.DragFeature(layerTrackMarker, 
        {'onComplete': updateMarker}
    );
    map.addControl(dragFeature);
    dragFeature.activate();

/*** Init Click Marker
*/
    var clickFeature = new OpenLayers.Control.SelectFeature(layerTrackMarker,
        {}
    );
    map.addControl(clickFeature);
    layerTrackMarker.events.on({
                    "featureselected": function(e) {
                        var markerId = e.feature.geometry.id;
                        removeMarker(markerId);
                        /* ToDo: show context menu */
                    },
                    "featureunselected": function(e) {
                        /* ToDo: hide context menu */
                    }
                });
    clickFeature.activate();

Answer 1

我没有测试它,但不会像这样的工作吗？

var dragged = false;
var dragFeature = new OpenLayers.Control.DragFeature(layerTrackMarker, {
    onComplete: function(){
        if(dragged){
            dragCallback();
        }else{
            clickCallback();
        }
    },
    onStart: function(){
        dragged = false;
    },
    onDrag: function(){
        dragged = true;
    }
});
map.addControl(dragFeature);
dragFeature.activate();

编辑:如果没有实际拖动,则不会触发onComplete.这是工作代码

var dragged = false;
var dragFeature = new OpenLayers.Control.DragFeature(pointLayer, {
    onStart: function(){dragged = false;},
    onDrag: function() {dragged = true;}
});

map.addControl(dragFeature);
dragFeature.activate();

map.events.register("mouseup", map , function(e){
    if(dragged == true){
        alert("dragged");
    }else{
        alert("clicked");
    }
});

jsFiddle:http://jsfiddle.net/reKRr/5/

编辑:这是不那么黑客的方式

var selectFeature = new OpenLayers.Control.SelectFeature(
    pointLayer,
    {
        onSelect: function(){            
            alert("selected");
        }
    }
);

var dragFeature = new OpenLayers.Control.DragFeature(pointLayer, {
    onComplete: function(){
        alert("drag");
    }
});

dragFeature.handlers['drag'].stopDown = false; 
dragFeature.handlers['drag'].stopUp = false; 
dragFeature.handlers['drag'].stopClick = false; 
dragFeature.handlers['feature'].stopDown = false; 
dragFeature.handlers['feature'].stopUp = false; 
dragFeature.handlers['feature'].stopClick = false; 

map.addControls([selectFeature,dragFeature]);

selectFeature.activate();
dragFeature.activate();