Как расширить класс с помощью mapbox-gl FullscreenButton

Я хочу обернуть стандартную полноэкранную кнопку mapbox-gl, см. nofollow noreferrer">здесь, чтобы добавить следующие функции:

  1. needsclick следует добавить в класс кнопки, чтобы избежать ошибок Fastclick.
  2. Вместо того, чтобы просто сделать полноэкранный контейнер карты, кнопка должна сделать всю страницу документа полноэкранной (а также другие элементы div и т. д.).

Я попробовал следующее: fiddle. Каким-то образом вам сначала нужно нажать return в окне ES6/Babel, прежде чем код запустится, и карта покажет...

Проблемы, с которыми я столкнулся:

  1. Метод 'onAdd' каким-то образом вызывает эту ошибку:

«TypeError: не удалось выполнить «appendChild» на «узле»: параметр 1 не имеет типа «узел». в e.addControl (https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js:390:3490) в jekuwak.js:69:5"

2. Когда проблема 1 решена (я использую обходной путь, добавив needsclick через Chrome Devtools), запускается this._mapContainer.webkitRequestFullscreen().

Что мне изменить, чтобы получить полноэкранный режим на всю страницу, а не только контейнер карты?


javascript mapbox-gl-js ecmascript-6
person musicformellons    schedule 20.04.2017    source источник
comment
@sgelb Поскольку это очень похоже на мой вопрос, на который вы ответили ранее, вы можете заглянуть в него ?! Спасибо!   -  person musicformellons    schedule 20.04.2017
comment
Люди не получают уведомления об @упоминаниях в SO, если они не участвуют в обсуждении.   -  person Brian McCutchon    schedule 23.04.2017
comment
Понятно..., жаль.   -  person musicformellons    schedule 23.04.2017

Ответы (1)


arrow_upward
2
arrow_downward

Для №1:

const fs = new mapboxgl.FullscreenControl();
map.addControl(fs)
fs._fullscreenButton.classList.add('needsclick');

Для № 2:

FullscreenControl не является расширяемым таким образом — он был разработан для работы на холсте карты, и его изменение, вероятно, будет более проблематичным, чем просто написание нужной функциональности с нуля. Если вы хотите сделать весь window полноэкранным, я предлагаю вам реализовать полноэкранную функциональность независимо от mapboxgl. Если вы хотите иметь возможность использовать значки, предоставляемые mapboxgl, вы можете добавить соответствующие классы CSS к создаваемому вами элементу.

person mollymerp    schedule 26.04.2017