Google Maps API показывает полноэкранные и масштабируемые значки 3 раза в каждой кнопке - PullRequest
Новая
       2

Google Maps API показывает полноэкранные и масштабируемые значки 3 раза в каждой кнопке

0 голосов
/ 19 декабря 2018

У меня есть компонент API карт Google в Shadow DOM компонента, который недавно начал отображаться так:

broken map

в полноэкранном режиме, увеличение + и уменьшение - отображаются 3 раза в соответствующих кнопках.

Мой код инициализации выглядит примерно так: 

new google.maps.Map(mapElement, {
    keyboardShortcuts: false, // MUST be off, thanks to https://issuetracker.google.com/issues/73644075 breaking all key inputs across Shadow DOM
    streetViewControl: false,
    mapTypeControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }] }] // Hide POI so our markers are more obvious
});

Однако, если я включу streetViewControl илиmapTypeControl они не отображаются три раза, это только полноэкранные и масштабируемые элементы управления.

Вот существующая проблема (требуется браузер, поддерживающий Shadow DOM): https://jsfiddle.net/KeithHenry/6yfmehLr/

Почемупоявляются дополнительные изображения?

Как исправить или обойти эту проблему?

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019

Я просто использую: 

#map img:not(:first-of-type){display: none}

(где #map - идентификатор контейнера карты).

Красивее, и, похоже, все проясняет.

0 голосов
/ 27 февраля 2019

Вы также можете вернуться к более старой версии (3.35) для временного решения.

0 голосов
/ 19 декабря 2018

У меня есть хак, который пока работает с этим.

Добавьте следующие стили в корень тени: 

.gm-control-active > img {
    box-sizing: content-box;
    display: none;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

.gm-control-active > img:nth-child(1) {
    display:block;
}

.gm-control-active:hover > img:nth-child(1),
.gm-control-active:active > img:nth-child(1) {
    display:none;
}

.gm-control-active:hover > img:nth-child(2),
.gm-control-active:active > img:nth-child(3) {
    display:block;
}

Они добавлены API Карт в <head>, но они не проходят через Shadow DOM.Это ошибка в API: https://issuetracker.google.com/issues/122064478

Поскольку это ошибка в API, этот вопрос решен.Пожалуйста, пометьте связанный вопрос, если у вас есть такая же проблема.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...