0

我正在尝试为开放的街道地图制作图像叠加层。它应该看起来像这样：

预览 http://www.wildurb.at/urbwalker-app/preview.png

我面临的问题是我无法通过图像的透明区域委派事件。

这是我试图用来触发事件的代码：

    <img id="overlay" style="position:absolute;" src="overlay.png"/>
    <div id="map"></div>

 

    #overlay {
            position:absolute;       
    }
    #map {
            position:absolute;
            width:300px;
            height:300px;
    }

 

    initMap();

    $('#overlay').bind({
            'mousedown' : function(event) {
                    event.preventDefault(); //no image dragging
                    $('#OpenLayers.Map_4_OpenLayers_ViewPort').trigger(event);
            }
    }
    $('#OpenLayers.Map_4_OpenLayers_ViewPort').bind('mousedown', function(event) {
            console.log(event);
    }

mousedown 永远不会被触发，我不确定在这里使用哪个选择器有没有办法将覆盖上发生的所有事件传递到地图？

提前致谢

最好的问候混乱

- - 编辑 - -

我创造了一个小提琴

4

2 回答 2

1

使用bind如下 api。然后它触发鼠标向下

$('#overlay').bind('mousedown',function(event) {
                alert("overlayfired");
                event.preventDefault(); //no image dragging
                $('#OpenLayers.Map_4_OpenLayers_ViewPort').mousedown();
        }
);

参考：http ://api.jquery.com/bind/

演示：http: //jsfiddle.net/KwLce/

于 2012-10-19T12:33:24.050 回答
0

我发现可以使用指针事件：无；用于 chrome firefox 和 safrie 以及 svg 用于 ie 和 opera 的解决方法

var map;

$(document).ready(function() {
    map = new OpenLayers.Map('map');
    layer = new OpenLayers.Layer.OSM("Simple OSM Map");
    map.addLayer(layer);

    map.setCenter(
        new OpenLayers.LonLat(-71.147, 42.472).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()),
        12
    );

    if($.browser.msie || $.browser.opera) {
        var over = '<svg id="overlay"><image width="300" height="300" xlink:href="overlay.png"></image></svg>';
    } else {
        var over = '<img id="imgOverlay" src="overlay.png"/>';
    }
    $('body').append(over);
});

查看此小提琴以获取工作解决方案

于 2012-10-19T19:11:43.483 回答