Javascript 允许拖动位于地图上方的div_Javascript_Css_Dhtml_Openlayers

Javascript 允许拖动位于地图上方的div

javascript css openlayers

Javascript 允许拖动位于地图上方的div,javascript,css,dhtml,openlayers,Javascript,Css,Dhtml,Openlayers,我有一个openlayers地图，并且我已经放置了一个div来放置在地图组件的内部/上方但是，当拖动贴图时，如果鼠标在div上移动，则拖动操作将终止如何避免拖动操作终止谢谢，p <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript" src="http://www.openlayers.

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


我想把这件事拖过去
//创建地图
var map=new OpenLayers.map（“map”，{“maxResolution”：0.703125}）；
addLayers（[new OpenLayers.Layer.WMS（“世界地图”），”http://labs.metacarta.com/wms-c/Basic.py?“，{layers:“basic”，格式：“image/png”}）]；
zoomToMaxExtent（）；
//把div放在地图上
clone（$（“map”），$（“overlay”），{offsetLeft:100，offsetTop:62.5，setWidth:false，setHeight:false}）；

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

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

在地图上定位的某些内容
初始化：函数（）
{
this.map.events.register（“movestart”、this、this.applyDragThrough）；
this.map.events.register（“moveend”，this，this.applyDragThrough）；
},
applyDragThrough:函数（事件）
{
var elements=Element.select（document.body，“.mapDragThrough”）；
var value=this.map.draging？“无”：“自动”；
调用（“setStyle”，{“pointerEvents”：value}）；
},

一个可能的解决方案是使用jQuery监听悬停事件，并相应地激活/停用导航控件（或者您可能正在使用不应该使用的MouseDefaults）。代码应该如下所示：

var nav = map.getControlsByClass("OpenLayers.Control.Navigation")[0]; 

$("#your-overlay-div").hover(function(){
   nav.deactivate();
},function(){
   nav.activate();
});

您可以将

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>


我想把这件事拖过去
//创建地图
var map=new OpenLayers.map（“map”，{“maxResolution”：0.703125}）；
addLayers（[new OpenLayers.Layer.WMS（“世界地图”），”http://labs.metacarta.com/wms-c/Basic.py?“，{layers:“basic”，格式：“image/png”}）]；
zoomToMaxExtent（）；
//把div放在地图上
clone（$（“map”），$（“overlay”）.setStyle（{'pointerEvents'：'none'}），{offsetLeft:100，offsetTop:62.5，setWidth:false，setHeight:false}）；

OL:s主页（）上的地图（导航栏）上有div，即使鼠标在div上，地图也可以拖动。与之相比，您是否有html可显示？抱歉，还添加了一个简单的自包含示例，我正在使用OL 2.7（很遗憾），因此无法使用较新的“documentDrag”功能。太糟糕了。。。运行2.7的原因是什么？有许多自定义组件的大型项目-每次升级都需要一些工作。。但这仍然是完全可以做到的。openlayers组件可以做到这一点，但我似乎无法找到代码。答案很好。。在IE（6-8测试版）上不起作用，但ff+chrome可以。事实上，它只有在修改示例后才起作用，因为prototype没有很好地通过编程设置样式。。。