允许拖动位于地图上的div

我有一个openlayers地图，我已经定位了一个div位于地图组件的内部/上方。

这可以正常工作，但是当拖动地图时，如果鼠标移动到div上，则拖动操作将终止。

如何避免拖动动作终止?

谢谢,p .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>
<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>
<script type="text/javascript">
    // create map
    var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
    map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
    map.zoomToMaxExtent();
    // put div over map
    Position.clone($("map"), $("overlay"), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>
</body>
</html>

编辑:解决方案使用接受的答案:

<div class="mapDragThrough">some content which gets positioned over the map</div>
initialise: function()
{
    this.map.events.register("movestart", this, this.applyDragThrough);
    this.map.events.register("moveend", this, this.applyDragThrough);
},
applyDragThrough: function(event)
{
    var elements = Element.select(document.body, ".mapDragThrough");
    var value = this.map.dragging ? "none" : "auto";
    elements.invoke("setStyle", {"pointerEvents":value});
},

可以将"overlay"div中的"pointer-events"css属性设置为"none"。这将导致元素根本不接收鼠标事件，从而允许不间断地继续拖动地图。

下面是一个工作示例:

<html>
<head>
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>
<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>
<script type="text/javascript">
    // create map
    var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
    map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
    map.zoomToMaxExtent();
    // put div over map
    Position.clone($("map"), $("overlay").setStyle({'pointerEvents': 'none'}), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>
</body>
</html>

一个可能的解决方案是用jQuery监听悬停事件并激活/停用导航控件(或者你可能正在使用你不应该使用的MouseDefaults)。代码应该看起来像这样:

var nav = map.getControlsByClass("OpenLayers.Control.Navigation")[0]; 
$("#your-overlay-div").hover(function(){
   nav.deactivate();
},function(){
   nav.activate();
});

相关内容

最新更新

热门标签：