javascript - 退出全屏控制模糊了 iPad 上的自定义控制(谷歌地图)

Question

在带有自定义控件的 Google Maps Javascript 网页中，如果用户在 iPad 上进入全屏模式，iPad 会显示一个“X”控件，这会遮挡我的自定义控件。

This JSFiddle 说明了这个问题。

重现步骤:

1. 在 iPad 上点击全屏( map 右上角)
2. 感到难过，因为自定义控件在左上角被遮挡了(来自 iPad 的屏幕截图 here 并嵌入在帖子末尾)

Javascript 片段:

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

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

可能的解决方法

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

我有reported this作为谷歌地图问题。

这是一个代码片段 - 奇怪的是这并没有重现问题，它没有在 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