Question

iOS上的Safari没有全屏API，因此，如文档中所述，ol.control.FullScreen不可用。

是否有推荐的解决方法？我太伤心了，无法在iPad上全屏设置我的地图!!

谢谢，

奥利弗

Answer 1

您可以在其他回复中找到一些其他建议：Full screen api HTML5 and Safari (iOS 6)

特别是，使用meta tags：

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

scrolling the page：

$('body').scrollTop(1);

Answer 2

我的iOS解决方法（我使用的是OpenLayers 6）是添加一个替代的“ PseudoFullScreen”控件，该控件可隐藏我的品牌和导航元素，以便在浏览器不显示时，地图至少可以占据整个浏览器区域不支持全屏API。这不是真正的全屏显示，但是它使我的地图应用程序在较小的移动屏幕上也可以使用。

您可能需要对此进行调整，以更改正文边距/填充和/或切换其他元素。

  /**
   * Copied from ol.control.FullScreen.
   *
   * @return {boolean} Fullscreen is supported by the current platform.
   */
  function isFullScreenSupported() {
      var body = document.body;
      return !!(body.webkitRequestFullscreen ||
          (body.msRequestFullscreen && document.msFullscreenEnabled) ||
          (body.requestFullscreen && document.fullscreenEnabled));
  }

  // Use the default FullScreen control if supported.
  if (isFullScreenSupported()) {
    map.addControl(new ol.control.FullScreen());
  } else {
    
    // Add an "almost full-screen" control that hides/shows the branding and menu.
    // This assumes that the header is in an element with id "header" and the map
    // is in an element with id "map".
    class PseudoFullScreen extends ol.control.FullScreen {

      /**
       * Constructor.
       */
      constructor(opt_options) {
        super(opt_options);
        // Remove the unsupported class that hides the control as we'll do
        // handle FullScreen a different way.
        this.element.className = this.element.className.replace('ol-unsupported', '');
      }

      /**
       * Override full-screen handling to hide/show the branding & navigation.
       */
      handleFullScreen_() {
        $('header').toggle(500, $.proxy(this.handleFullScreenChange_, this));
      }

      /**
       * Override full-screen change handling.
       */
      handleFullScreenChange_() {
        if ($('header').is(':hidden')) {
            this.setClassName_(this.button_, true);
            this.replaceNode(this.labelActiveNode_, this.labelNode_);
        }
        else {
            this.setClassName_(this.button_, false);
            this.replaceNode(this.labelNode_, this.labelActiveNode_);
        }
    
        this.updateMapHeight();
      }

      /**
       * Copied from ol.dom to be usable in this context.
       *
       * @param {Node} newNode Node to replace old node
       * @param {Node} oldNode The node to be replaced
       */
      replaceNode(newNode, oldNode) {
          var parent = oldNode.parentNode;
          if (parent) {
              parent.replaceChild(newNode, oldNode);
          }
      }
      
      /**
       * Update our map height to full window height.
       */
      function updateMapHeight() {
        var new_height = $(window).height() - $('#map .ol-viewport').offset().top - parseInt($("body").css("margin-bottom")) - parseInt($("body").css("padding-bottom"));
        $('#map').height(new_height);
    
        var map = this.getMap();
        if (map) {
          // Notify the map that it should adjust to avoid stretching.
          map.updateSize();
        }
        return new_height;
     }

    }
    map.addControl(new PseudoFullScreen);

  }

Openlayers3 ol.control.FullScreen在iOS上不起作用

2 个答案: