退出全屏控制会遮盖 IPad 上的自定义控制（GoogleMaps）

Question

在带有自定义控件的 Google 地图 Javascript 网页中，在 IPad 上，如果用户进入全屏模式，IPad 会显示一个 "X" 控件，它掩盖了我的自定义控件。

This JSFiddle 演示了这个问题。

重现步骤：

在 iPad（地图右上角）上单击全屏
感到难过，因为自定义控件在左上角被遮挡了（来自 IPad here 的屏幕截图并嵌入在 post 的末尾）

Javascript 片段：

      var customControl = document.getElementById('customControl');

      map.controls[google.maps.ControlPosition.LEFT_TOP].push(customControl);

可能的解决方法

我可以将控件放在不同的位置，但在我的生产代码中有几个控件，我需要在 LEFT_TOP 位置放置一些东西。（或者TOP_LEFT，左上角也会出现这个问题。）
我可以尝试检测 iPad 并使用 fullscreenControl 隐藏全屏控件。我觉得那是 Google 的工作
我可以尝试检测 iPad 并进入全屏，然后更改自定义控件元素的上边距。我觉得这绝对是 Google 的工作。

我有 reported this 作为 Google 地图问题。

这是一个代码片段 - 奇怪的是这并没有重现这个问题，它没有在 IPad 上显示全屏控制：

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map_div"), {
                    zoom: 11,
                    center: new google.maps.LatLng(51.521,-0.12),
                    streetViewControl: false,
                    mapTypeControl: false
  });

  /* Custom contol */
  var customControl = document.getElementById('customControl');
               map.controls[google.maps.ControlPosition.LEFT_TOP].push(customControl);
});

function customControlClicked() {
  alert("Custom control clicked");
}

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}

h1, p {
  margin: 0;
  padding: 0;
}

#customControl {
  font-size: 32px;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin-left: 5px;
  margin-top: 5px;
  padding: 4px;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_div" style="height: 400px;"></div>
<div id="customControl" onclick="customControlClicked();">Custom</div>

IPad 上的问题截图

Answer 1

编辑 Google 说他们不会修复它：回应我的 issue report，他们说

"After investigation, I see that the iOS is the one that is creating the exit button and was not implemented by the Maps Javascript API, please also note that the exit button also occurs with other web applications as well, since this is out of our scope and documentation, kindly redirect your query to the support page of iOS as they will provide better solutions for the issue."

因此，除非有人有更好的答案，否则我将通过删除 IPad 上的全屏控制来解决此问题。

Here 是一个具有解决方法的 JSFiddle。

这是基本代码。

  var mapOptions = {
                    zoom: 11,
                    center: new google.maps.LatLng(51.521,-0.12),
                    streetViewControl: false,
                    mapTypeControl: false
  };
  if ( isIPad() ) {
    mapOptions.fullscreenControl = false;
  }
  var map = new google.maps.Map(document.getElementById("map_div"), mapOptions);


  function isIPad() {
    var userAgent = window.navigator.userAgent;
    return (userAgent.match(/iPad/i));
  }

代码改编自here

退出全屏控制会遮盖 IPad 上的自定义控制（GoogleMaps）

Exit full screen control obscures custom control on IPad (GoogleMaps)

javascript

ipad

google-maps-api-3

fullscreen