OpenLayers 弹出窗口未响应事件

发布于 2024-10-21 03:58:16 字数 1311 浏览 5 评论 0原文

我有一个 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);

                });
}

I have an OpenLayers map with a marker and a popup that's supposed to appear when I click on the marker. This works fine in IE8 but not in Firefox 3.6. Any ideas why? As far as I can tell the mousedown event is not getting fired since my log message doesn't appear. The map is at http://ndinfo.heroku.com/test.html and the code I use to create the marker and popup is:

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

                });
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

笑忘罢 2024-10-28 03:58:16

来自的回答在这里。关键是重写 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;
        }
    });

Answer from here. The key was overriding the activate() function in OpenLayers.Control.ModifyFeature. I didn't realize having a control before creating the marker would affect the markers in any way, but it turns out that it does.

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;
        }
    });
凉城凉梦凉人心 2024-10-28 03:58:16

我认为 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(点击地图创建标记,然后单击该标记以打开弹出窗口)。

我希望它有帮助。快乐编码!

I think that marker doesn't have any 'mousedown' event associated. But OpenLayers.Markers probably has it. Try this:

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

Here is a little example: http://jsbin.com/ezeno3 (click on the map to create the mark, and then click on the mark to open a popup).

I hope it helps. Happy codding!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文