Jquery 如何在layer.Markers下面的KML层上使用OpenLayers.Control.SelectFeature

我遇到了这个有趣的问题，所以我想我可以分享我的解决方案，看看是否有人有更好的建议

背景：

一个OpenLayers地图，有3层：Google（基础），一个带有多边形的KML层，还有一个layer.Markers层，带有Google Charts API中非常大的图标

我们想要实现的目标：

使用Control.SelectFeature，我们希望在移动鼠标时高亮显示/选择kml层。我们对标记层一点也不感兴趣

问题：

当鼠标位于其中一个标记图标上时，事件不会传递到下面的kml层

尝试过的解决方案：

检查此问题：

---

接受的答案、我的评论和@Fraser的答案。据我所知，@Fraser的回答对这个问题没有丝毫影响。@Ringdahl的答案和“指针事件：无”的应用相结合似乎解决了这个问题……除了Internet Explorer（这并不奇怪）。

我最终实现的解决Internet Explorer问题的方法是这样的

（如果IE）用svg替换标记层的所有图像。这允许IE识别“指针事件：无”，事件通过下面的层传递。但是，当地图改变缩放时，OpenLayers库希望找到图像（我相信它们的位置），因此库崩溃，地图无法缩放

因此，将处理程序附加到“movestart”事件，恢复原始OpenLayers图像，当地图停止移动时（短暂超时后），再次使用svg替换图像

正如您可以想象的，这是相当cpu密集型的。虽然在我的时间范围内，我还是找不到更好的解决方案

相关代码如下：

“kmlInit”显示kml层是否已加载

“标记”是标记层

“getInternetExplorerVersion”是一个函数，如果找到非IE浏览器，则返回-1，否则返回版本

if (getInternetExplorerVersion()>-1){
    map.events.register('movestart',this,function(e){
        if(kmlInit){
            ieSucksRestore();
        }
    });

    map.events.register('moveend',this,function(e){
        if(kmlInit){
            if (ieCrap){
                clearTimeout(ieCrap);
            }
            ieCrap=setTimeout(ieSucks,1000);           //to give time for multiple move/zooms
        }
    });
}

function ieSucks()
{
    if ($(markers.div).find(".olAlphaImg").length>0){

        try{

            $(markers.div).find(".olAlphaImg").replaceWith(function(){
                var css = this.style;
                var src = this.src;
                var elem = $("");
                var width = parseInt(css.width, 10);
                var height = parseInt(css.height, 10)
                var img = document.createElementNS('http://www.w3.org/2000/svg','image');
                var elem = document.createElementNS('http://www.w3.org/2000/svg','svg');
                elem.setAttributeNS(null,"class",'svgHack');
                elem.setAttributeNS(null,"x",'0');
                elem.setAttributeNS(null,"y",'0');
                elem.setAttributeNS(null,"width",width);
                elem.setAttributeNS(null,"height",height);
                elem.setAttributeNS(null,"pointer-events","none");
                img.setAttributeNS(null,"x",'0');
                img.setAttributeNS(null,"y",'0');
                img.setAttributeNS(null,"width",width);
                img.setAttributeNS(null,"height",height);
                img.setAttributeNS('http://www.w3.org/1999/xlink',"href",src);
                elem.appendChild(img);
                return elem;
            });
        }catch(err){console.log(err.message);}
    }
}

function ieSucksRestore()
{
    if ($(".svgHack").length>0){
        try{
            $(".svgHack").replaceWith(function(){
                var svg=$(this);
                var id = svg.parent()[0].id;
                var img = svg.children()[0];
                var newimg = $("");
                newimg.css('height',img.height+"px");
                newimg.css('width',img.width+"px");
                newimg.css('position','relative');
                newimg.attr("src",img.href.baseVal);
                newimg.attr("class","olAlphaImg");
                newimg.attr("id",id+"_innerImage");
                return newimg;
            });
        }catch(err){console.log(err.message);}
    }

}