Выход из полноэкранного управления скрывает пользовательский контроль на IPad (GoogleMaps) - PullRequest
Новая
       24

Выход из полноэкранного управления скрывает пользовательский контроль на IPad (GoogleMaps)

1 голос
/ 20 марта 2019

На веб-странице Google Maps Javascript с настраиваемым элементом управления на IPad, если пользователь переходит в полноэкранный режим, IPad отображает элемент управления «X», который скрывает мой настраиваемый элемент управления.

Это JSFiddle демонстрирует проблему.

Шаги для воспроизведения:

  1. Нажмите на полный экран на iPad (в правом верхнем углу карты)
  2. Грустно, потому что пользовательский элемент управления скрыт вверху слева (скриншот с IPad здесь и встроен в конце поста)

Фрагмент Javascript: 

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

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

Возможные обходные пути

  • Я мог бы поместить элемент управления в другое положение, но в моем производственном коде есть несколько элементов управления, и мне нужно что-то поместить в положение LEFT_TOP. (Или TOP_LEFT, проблема также возникает для верхнего левого угла.)
  • Я мог бы попытаться обнаружить iPad и использовать fullscreenControl, чтобы скрыть полный экран управления. Я чувствую, что это работа Google
  • Я мог бы попытаться обнаружить iPad и войти в полноэкранный режим, а затем изменить верхнее поле моего пользовательского элемента управления. Я чувствую, что это определенно работа Google.

Я сообщил об этом как проблема Google Maps.

Вот фрагмент кода - странно, что это не воспроизводит проблему, это не показывает полноэкранное управление на 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 Screenshot

1 Ответ

0 голосов
/ 21 марта 2019

РЕДАКТИРОВАТЬ Google говорят, что не собираются это исправить: в ответ на мой отчет о проблеме они сказали

"После расследования яОбратите внимание, что именно iOS создает кнопку выхода и не была реализована в API JavaScript Javascript. Обратите внимание, что кнопка выхода также встречается и в других веб-приложениях, поскольку это выходит за рамки нашей области и документации.перенаправьте ваш запрос на страницу поддержки iOS, поскольку они предоставят более эффективные решения для этой проблемы. "

Поэтому, если у кого-то нет лучшего ответа, я буду обходить проблему, удаляя полноэкранный контроль на IPad.,

Здесь - это 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));
  }

Код был адаптирован с здесь

...