popup - ユーザーが行をクリックしたときにポップアップを表示する

Question

ユーザーが行をクリックしたときにポップアップを表示する必要があります。以下のようなコードですが、動作しません:

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

地図投影法は EPSG:4326 です。

線画:

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

次の 2 つの例を組み合わせようとしています: http://openlayers.org/dev/examples/select-feature-openpopup.htmlとhttp://openlayers.org/dev/examples/click.html

Answer 1

control.SelectFeature をアクティブにする場所がわかりません。