檢測鼠標懸停在一酥料餅從openlayers3

我想，當鼠標懸停在從openlayers3地圖（引導）酥料餅的檢測，這樣我就可以離開酥料餅在這種情況下打開，但在所有其他破壞它案例。我的地圖有很多包含鏈接的彈出窗口的功能，因此用戶應該能夠將鼠標移動到鏈接上，並在彈窗仍然打開的情況下單擊。把一個計時器放在摧毀事件上對於我正在顯示的砰砰聲的所有不同功能來說真的很麻煩。我不確定是否最好的解決方案是嘗試通過開放層檢測事件（這是可能的？）還是通過引導。檢測鼠標懸停在一酥料餅從openlayers3

這是一個jsfiddle顯示問題。

只有鼠標懸停在彈出窗口上才能保持彈出窗口打開的最佳方式是什麼？

感謝您的幫助。

// define map 
var map = new ol.Map({ 
    target: "map", 
    layers: [ 
     new ol.layer.Tile({ 
      source: new ol.source.OSM() 
     }) 
    ], 
    view: new ol.View({ 
     zoom: 1, 
     center: ol.proj.transform([0,0], "EPSG:4326", "EPSG:3857"), 
    }) 
}); 

// define popup overlay 
popup = new ol.Overlay({ 
    element: document.getElementById("popup") 
}); 
map.addOverlay(popup); 

// define feature 
var FeatureLayer = new ol.FeatureOverlay({ 
    map: map, 
    features: [new ol.Feature({ 
     geometry: new ol.geom.Circle([0,0], 1000000), 
    })] 
}) 

// define mouse move event 
$(map.getViewport()).on("mousemove", function(evt) { 
    var pixel = map.getEventPixel(evt.originalEvent); 
    var coordinate = map.getCoordinateFromPixel(pixel) 
    displayFeatureInfo(pixel, coordinate); 
}); 

// popover display function 
var feature_prev 
function displayFeatureInfo(pixel, coordinate) 
{ 
    var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) { 
     return feature; 
    }); 
    if (feature == feature_prev) // if same feature, leave popup open 
    { 
     return 
    } 

    // if (mouse hovering over open popover) <--------------------- how to detect this? 
    //{ 
    // return 
    //} 

    // display popover 
    var element = popup.getElement(); 
    if (feature) // if mouse is over feature 
    { 
     coords = ol.proj.transform([0,0], "EPSG:4326", "EPSG:3857"), 
     popup.setPosition(coords); 
     $(element).popover("destroy") 
     $(element).popover({ 
      "html": true, 
      "content": "<a href='http://www.google.com'>Link 1</a><br>"+ 
         "<a href='http://openlayers.org'>Link 2</a>" 
     }); 
     $(element).popover("show"); 
     feature_prev = feature 
    } 
    else 
    { 
     $(element).popover("destroy") 
     feature_prev = [] 
    } 
}

來源

2015-10-14 Animik

正如你所看到的，酥料餅有class名popover-content，您可以檢查是否鼠標事件的目標是彈出，然後return保持酥料餅的開放。

通過這種方法，當你將鼠標懸停在酥料餅的鏈路上的酥料餅將關閉。因此，我們必須ass額外的條件來檢查a標籤，以便在您將鼠標懸停在彈出鏈接上時保持打開狀態。

if (e.target.className == 'popover-content' || e.target.tagName.toLowerCase() === 'a') { 
    return; 
}

這是你的工作jsFiddle

來源

2015-10-14 17:58:42 Patel

作品完美，感謝帕特爾！ – Animik

檢測鼠標懸停在一酥料餅從openlayers3

回答

相關問題