Я пытаюсь создать слайд-панель, аналогичную той, которая в настоящее время используется в левой части maps.google.com.
Поведение, которое я пытаюсь воспроизвести в связи с этой панелью (как показано на картах Google)
- Когда панель откроется, центр карт останется неподвижным
- Элементы управления карты (масштабирование, масштабирование и т. Д.) Не перекрываются панелью, так как при этом они будут сдвигаться с расширением панели.
Сначала я думал, что могу просто расположить карту над картой, но это покрывало элементы управления карты, например. (масштабирование, масштабирование и т. д.) и размещение их в другом месте было невозможно.
Две другие мои попытки уже почти у цели, но, к сожалению, не совсем. Обратите внимание, что примеры кода были быстро собраны вместе для демонстрационных целей.
1-я попытка:
http://jsfiddle.net/fdwGd/5/
Два элемента div, один из которых представляет собой скользящую панель, а другой содержит содержимое карты, оба плавают влево. Кнопка «Закрыть» / «Открыть» на белой панели имеет обработчик щелчка, который анимирует изменение поля на слайд-панели, чтобы скрыть его. Ширина div карты увеличивается параллельно, чтобы заполнить пустое пространство. Проблема здесь в том, что вся карта сдвигается вправо при расширении панели (нажмите «Открыть» / «Закрыть» в примере с jsfiddle)
Положение панели с правой стороны экрана решает эту проблему (с добавлением переполнения: скрытого в элементе HTML), хотя это не соответствует моим требованиям к дизайну.
Также обратите внимание, что использование функции панби (x, y) карт Google для исправления скачка пикселя было очень неуклюжим, поэтому на самом деле это тоже не вариант
2-я попытка:
http://jsfiddle.net/63uxt/1/
Итак, я подумал, что мне нужно добавить программный элемент управления карты Google (этот элемент управления является рассматриваемой скользящей панелью) и использовать параметры позиционирования, чтобы другие элементы управления удобно помещались на моей слайд-панели. Первоначально думал, что это работает, пока я не понял, что другие элементы управления не переместятся сами после того, как скользящая панель была скрыта. Перемещение карты обновило положение встроенных элементов управления (масштабирование и т. Д.), Но это невозможно.
есть идеи ??
Спасибо