Почему мой оверлей исчезает в Google Maps API в JS в iOS? - PullRequest
Новая
       10

Почему мой оверлей исчезает в Google Maps API в JS в iOS?

0 голосов
/ 28 мая 2020

В моем приложении отображается оверлей. Он отлично работает на Android и в браузерах, но на iOS (с использованием Cordova) наложение иногда исчезает при масштабировании или панорамировании. Вот мои onAdd () и draw (). 

function onAdd() {
  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.opacity = this.isAdminMode ? '0.5' : '1';
  img.style.position = 'absolute';
  img.style.transform = 'rotate(0deg)';
  div.appendChild(img);
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

function draw() {
  var overlayProjection = this.getProjection();
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
  div.style.transform = 'rotate(' + this.rot + 'deg)';
};

Я пробовал всевозможные вещи в этих двух функциях и в других местах, включая отключение / повторное подключение карты, многократное рисование, ведение журнала для проверки неправильного sw / ne координаты - ничего. И отлично работает ни в чем, кроме iOS.

Есть у кого-нибудь идеи?

1 Ответ

0 голосов
/ 28 мая 2020

Наконец-то! Я нашел этот архивный пост 2012 года в Google Code: https://code.google.com/archive/p/google-maps-utility-library-v3/issues/176

Суть в том, что в iOS есть действительно давняя ошибка, которая вызывает это, и обходной путь чтобы добавить стиль CSS, 

-webkit-transform: translateZ(0px);

к тому, что исчезает. И это решает проблему.

Итак, чтобы исправить мой код из вопроса, я добавил строку ***, как показано ниже. 

function onAdd() {
  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.opacity = this.isAdminMode ? '0.5' : '1';
  img.style.position = 'absolute';
  img.style.transform = 'rotate(0deg)';
  img.style['-webkit-transform'] = 'translateZ(0px)';  // disappearing fix ***
  div.appendChild(img);
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};
...