Show pop-up when user clicked on the line

Question

Need to show a pop-up when user clicks on the line. Code as below but does not work:

        var ClickLon;
        var ClickLat;

        OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
            defaultHandlerOptions: {
                'single': true,
                'double': false,
                'pixelTolerance': 0,
                'stopSingle': false,
                'stopDouble': false
            },

            initialize: function(options) {
                this.handlerOptions = OpenLayers.Util.extend(
                    {}, this.defaultHandlerOptions
                );
                OpenLayers.Control.prototype.initialize.apply(
                    this, arguments
                );
                this.handler = new OpenLayers.Handler.Click(
                    this, {
                        'click': this.trigger
                    }, this.handlerOptions
                );
            },

            trigger: function(e) {
                var lonlat = map.getLonLatFromPixel(e.xy);
                ClickLon = lonlat.lon;
                ClickLat = lonlat.lat;
            }

        });


        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }
        function onFeatureSelect(feature) {
            selectedFeature = feature;
            id = feature.id;
            alert(ClickLon);
            var lonLat = new OpenLayers.LonLat(ClickLon, ClickLat).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));

            popup = new OpenLayers.Popup.FramedCloud("chicken",
                                    lonLat,
                                    null,
                                    "<div style='font-size:.8em'>" +CableLineText_arr[id]  +"</div>",
                                    null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
...
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path)); 

var click = new OpenLayers.Control.Click();
    map.addControl(click);
    click.activate();

    selectControl = new OpenLayers.Control.SelectFeature(lineLayer,
             {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

    drawControls = {
                polygon: new OpenLayers.Control.DrawFeature(lineLayer,
                            OpenLayers.Handler.Polygon),
                select: selectControl
            };

            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }

Map projection is EPSG:4326.

Line drawing as:

var points = new Array(
        new OpenLayers.Geometry.Point(47, 32.24),
        new OpenLayers.Geometry.Point(45, 33),
        new OpenLayers.Geometry.Point(49, 35)
    );

    var line = new OpenLayers.Geometry.LineString(points);
    line.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

    var style = { 
        strokeColor: '#0000ff', 
        strokeOpacity: 0.5,
        strokeWidth: 5
    };

    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
    alert(lineFeature.id);
    lineLayer.addFeatures([lineFeature]);

Trying to combine these two examples: http://openlayers.org/dev/examples/select-feature-openpopup.html and http://openlayers.org/dev/examples/click.html

Answer 1

我看不到激活控件的位置。SelectFeature。