OpenLayers弹出窗口不响应事件

Question

我有一个带有标记和弹出窗口的OpenLayers地图，当我点击标记时应该出现弹出窗口。在IE8中可以正常工作，但在Firefox 3.6中无法正常工作。有任何想法吗？据我所知，由于我的日志消息没有出现，因此mousedown事件没有被触发。地图位于http://ndinfo.heroku.com/test.html，我用来创建标记和弹出窗口的代码是：

function addMarker() {
    var map = g_waze_map.map;

    var markers1 = new OpenLayers.Layer.Markers( "Markers1" );
    g_waze_map.map.addLayer(markers1);
    var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
    var marker = new OpenLayers.Marker(new OpenLayers.LonLat(34.7934759272249, 32.0835554760902),icon);

 markers1.addMarker(marker);
            marker.events.register('mousedown', marker, function(evt) {
                    console.log('hi');
                    var popup = new OpenLayers.Popup.FramedCloud(null,
                                       marker.lonlat,
                                       null,
                                       "<div style='background-color:red; width:150;height:100'>hi</div>",

 null,true,null);

                    map.addPopup(popup);

                    OpenLayers.Event.stop(evt);

                });
}

- Johnny

Answer 1

来自这里的答案。关键是覆盖OpenLayers.Control.ModifyFeature中的activate()函数。我没有意识到在创建标记之前有控件会以任何方式影响标记，但事实证明确实如此。

var shapes = new OpenLayers.Layer.Vector( "Shapes" );
map.addLayer(shapes);
var modifyControl =  new OpenLayers.Control.ModifyFeature(shapes, {
        activate: function() {
            var activated = false;
            if(OpenLayers.Handler.prototype.activate.apply(this, arguments)) {

                this.map.events.on({
                    "removelayer": this.handleMapEvents,
                    "changelayer": this.handleMapEvents,
                    scope: this
                });
                activated = true;
            }
            return activated;
        }
    });

- Johnny

---

如果您在图层之后添加ModifyFeature控件，是否仍需要覆盖activate()方法？ - Niklas Wulff

Answer 2

我认为marker没有与任何“mousedown”事件相关联。但是OpenLayers.Markers可能有。尝试这个：

// Create your markers layer
var markerLayer = new OpenLayers.Layer.Markers( "Markers1" );

// do whatever you want, and then...

// Create your marker
var marker = new OpenLayers.Marker(
         new OpenLayers.LonLat(34.7934759272249, 32.0835554760902),
         icon);

// Add your recently created marker to your markers layer
markerLayer.addMarker(marker);

// And bind 'mousedown' event to 'markers' layer, not to 'marker' object
markerLayer.events.register('mousedown', markerLayer, function(evt) {
  console.log('hi');
  var popup = new OpenLayers.Popup.FramedCloud(null,marker.lonlat,null,
              "<div style='background-color:red; width:150;height:100'>hi</div>",
              null,true,null);
    map.addPopup(popup);
    OpenLayers.Event.stop(evt);
});

这里有一个小例子：http://jsbin.com/ezeno3（点击地图创建标记，然后点击标记打开弹出窗口）。

希望能对你有所帮助。编程愉快！

- Fran Verona

---

但是你示例中的实际代码确实将事件绑定到了标记：marker.events.register（'mousedown'，marker，function（evt）{...}）; 我尝试了你的想法，目前似乎没有帮助。感谢您的回复！ - Johnny

请指导这个问题 - http://stackoverflow.com/questions/12470470/show-pop-up-box-on-google-map-sometime-it-didnt-show-it - Piraba