Question

在带有自定义控件的Google Maps Javascript网页上，在IPad上，如果用户进入全屏显示，则IPad会显示“ X”控件，该控件会遮盖我的自定义控件。

This JSFiddle 演示了此问题。

复制步骤：

在iPad上单击全屏（在地图的右上方）
感到难过，因为自定义控件在左上角被遮住了（来自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并进入全屏状态，然后更改自定义控件元素的最高边距。我觉得那绝对是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

编辑，谷歌表示他们不会解决该问题：针对我的issue report，他们说

“经过调查后，我发现iOS是正在创建退出按钮的iOS，并且不是由Maps Javascript API实现的，请注意，退出按钮也与其他Web应用程序一起出现，因为这是在我们的范围和文档范围之外，请将您的查询重定向到iOS的支持页面，因为它们将为该问题提供更好的解决方案。“

因此，除非有人有更好的答案，否则我将通过删除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）的自定义控件

1 个答案: