2 Stimmen

Ziehen durch ein über der Karte positioniertes Div zulassen

Ich habe eine Openlayers-Karte und ich habe ein Div positioniert, um innerhalb/über der Kartenkomponente zu sitzen.

Das funktioniert gut, aber wenn die Maus beim Ziehen der Karte durch/über das Div bewegt wird, wird der Ziehvorgang abgebrochen.

Wie kann ich verhindern, dass der Vorgang des Ziehens abgebrochen wird?

Danke, 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>

EDIT: Lösung unter Verwendung der akzeptierten Antwort:

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

3voto

aviaron Punkte 640

Sie können einstellen pointer-events css-Attribute der overlay DIV bis none . Dies führt dazu, dass das Element überhaupt keine Mausereignisse empfängt, so dass das Ziehen der Karte ohne Unterbrechung fortgesetzt werden kann.

Hier ein praktisches Beispiel:

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

0voto

igorti Punkte 3768

Eine mögliche Lösung könnte sein, auf das Hover-Ereignis mit jQuery zu hören und das Navigations-Steuerelement entsprechend zu aktivieren/deaktivieren (oder Sie verwenden wahrscheinlich MouseDefaults, was Sie nicht sollten). Der Code sollte in etwa wie folgt aussehen:

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

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

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X