Маркеры Карт Google исчезают при определенном уровне масштабирования только на iPhone / iPad - PullRequest
Новая
       4

Маркеры Карт Google исчезают при определенном уровне масштабирования только на iPhone / iPad

1 голос
/ 10 февраля 2012

Я действительно застрял в данный момент с очень странной проблемой при использовании Google Maps API V3.

У меня есть карта в iframe, которая показывает множество маркеров с некоторыми пользовательскими информационными блоками для каждого при нажатии,здесь:

http://www.whist.ch/karte

Все отлично работает во всех браузерах, которые я тестировал на Mac и ПК (Chrome, Firefox, IE).Однако на iPad и iPhone маркеры исчезают при увеличении масштаба и снова появляются при уменьшении масштаба.

У кого-нибудь есть объяснение или исправление для этого?

Очень признателен,

Армин.

пс.в гугл-картах на iPad тоже есть какие-то уродливые белые линии, может быть, кто-то тоже знает, как от них избавиться:)

Ответы [ 3 ]

6 голосов
/ 23 апреля 2012

После многих интенсивных отладок, я думаю, что нашел решение моей проблемы (возможно, и вашей тоже).Похоже, что Google знает об этой проблеме, и вот как я нашел решение.Я использовал потрясающий отладчик под названием weinre ( документация ), это утилита удаленной отладки для браузеров на основе webkit.

API Карт Google использует свойство CSS -webkit-transform: matrix(a,b,c,d,f);сделать пинч-зум и панорамирование.Это все очень красиво, но кажется, что есть ошибка в браузерах на iPad, основанных на webkit (я пробовал три других браузера, не только Safari).Я заметил, что ко многим (если не большинству) элементам div, которые были размещены на карте для листов карты, наложений, теней и т. Д., Применено -webkit-transform: translateZ(0px);.Я добавил эту строку в мои элементы img и div и сразу же исправил свою проблему.

Я не пробовал ее, добавляя стиль через связанную таблицу стилей, только изменяя каждый элемент напрямую, но тамты иди;решение: 

element.style.webkitTransform = "-webkit-transform: translateZ(0px);";

tl; dr это ошибка iPad ... чтобы решить, добавьте -webkit-transform: translateZ(0px); ко всему, что исчезает.

1 голос
/ 07 июня 2012

Мне удалось подтвердить, что сброс -webkit-transform: translateZ (0px) решает проблему.Тем не менее, я вижу в этом дополнительную проблему с плагином Google InfoBox.

Мое исправление обновляет скрипт InfoBox (v1.1.11) следующим образом:

В InfoBox.prototype.setBoxStyle_: 

// Apply style values defined in the boxStyle parameter:
boxStyle = this.boxStyle_;
for (i in boxStyle) {
  if (boxStyle.hasOwnProperty(i)) {
    this.div_.style[i] = boxStyle[i];
  }
}
//Fix for iOS dissappearing InfoBox
if (typeof this.div_.style.webkitTransform === 'undefined') this.div_.style.webkitTransform = 'translateZ(0px)';

// Fix up opacity style for benefit of MSIE:
0 голосов
/ 13 июня 2016

У меня была такая же проблема в Chrome Version 51.0.2704.84. Когда я использовал разные типы маркеров и получал максимальное увеличение, маркеры исчезали.

Это решение помогло мне: 

-webkit-transform: translateZ(0px);
...