OpenLayers 3 - 全屏按钮 - 图标在移动设备上不可见Firefox

在移动设备上，OpenLayers 3 - 全屏图标，Mozilla Firefox未显示。OpenLayers 3 - 全屏按钮 - 图标在移动设备上不可见Firefox

有没有办法解决这个问题，或者设置一个图标来显示在每个设备上？

感谢，

Eylul

2016-03-15 Eylül

$('.ol-full-screen-false').attr('title', 'Visualizza a schermo intero'); 
    $('.ol-full-screen-false').html('<img src="icons/fullscreen_s.png"/>'); 

    if (document.addEventListener) 
    { 
    document.addEventListener('webkitfullscreenchange', fullscreenHandler, false); 
    document.addEventListener('mozfullscreenchange', fullscreenHandler, false); 
    document.addEventListener('fullscreenchange', fullscreenHandler, false); 
    document.addEventListener('MSFullscreenChange', fullscreenHandler, false); 
    } 

    function fullscreenHandler() 
    { 
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) 
    { 
     $('.ol-full-screen-true').attr('title', 'Chiudi la visualizzione a schermo intero'); 
     $('.ol-full-screen-true').html('<img src="icons/close_s.png"/>'); 

     $('.ol-full-screen-false').attr('title', 'Visualizza a schermo intero'); 
     $('.ol-full-screen-false').html('<img src="icons/fullscreen_s.png"/>'); 
    } 
    }

来源

2016-03-17 10:41:42

可以使用的ol.control.FullScreen的label和labelActive构造选项轻松地设置自己的图标。

与Fontawesome

来源

2016-03-16 16:09:10 ahocevar

这样我无法设置形象，我需要进入和退出全屏不同的技巧。我写了我的解决方案作为任何人可能需要它的另一个答案。 –

解决方案展开图标：

var fspan = document.createElement('i'); 
fspan.setAttribute('class', 'fa fa-expand'); 
... 
// use it in map control definition 
new ol.control.FullScreen({ label: fspan, tipLabel: 'Fullscreen' })

来源

2017-02-04 11:19:16

OpenLayers 3 - 全屏按钮 - 图标在移动设备上不可见Firefox

回答

相关问题