2013-09-04 2 views
1

У меня возникла проблема с тремя настраиваемыми элементами управления, которые я создал для приложения карты.Пользовательская карта Google v3 Элементы управления Позиция №

В соответствии с документацией API:

В API размещает элементы управления в каждой позиции по порядку свойства индекса; сначала устанавливаются элементы управления с более низким индексом. Например, два пользовательских элемента управления в позиции BOTTOM_RIGHT будут выложены в соответствии с этим порядком индекса, причем более низкие значения индекса имеют приоритет. По умолчанию все пользовательские элементы управления помещаются после размещения каких-либо элементов управления по умолчанию API. Вы можете переопределить это поведение, указав свойство индекса элемента управления как отрицательное. Пользовательские элементы управления нельзя размещать слева от логотипа или справа от авторских прав.

Поэтому я добавил три элемента управления в одно и то же положение, указав каждое значение индекса и ожидая, что они будут соответствовать соответствующим образом.

Когда элементы управления сначала загружаются, они расположены друг над другом, вместо того, чтобы соответствовать их соответствующим значениям индекса.

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

Вот что я пытался решить эту проблему:

  • Настройка положения элементов управления в CSS (не работает, так как позиционирование управления может быть только на заказ, если вы заключаете элементы управления)
  • Отсрочка время для каждой кнопки управления, которые будет добавлено
  • Пытались запуск действия наведения курсора мыши других элементов управления, так как это вручную показывает элементы управления в правильном положении

Любого помощь или понимание в оценках. Я знаю, что я упоминал, что обертка элементов управления позволяет настраивать позицию (согласно here), но есть ли другой способ заставить это работать, не делая этого?

Мои извинения, я попробовал загрузить скриншоты, но, по-видимому, я недостаточно популярен. Вот JsFiddle.

JsFiddle показывает, как я добавляю эти элементы управления только тогда, когда пользователь выбрал конкретный вход:

$('#toggle').on('click', function(){ 
    if ($(this).is(':checked')){ 
     $(pointSelDiv).css('display', 'block'); 
     $(polySelDiv).css('display', 'block'); 
     $(circSelDiv).css('display', 'block'); 
    }else{ 
     $(pointSelDiv).css('display', 'none'); 
     $(polySelDiv).css('display', 'none'); 
     $(circSelDiv).css('display', 'none'); 
    } 
}); 

Еще раз спасибо!

+0

, а не скриншоты, предоставим [jsfiddle] (http://jsfiddle.net/), чтобы мы могли воссоздать эту проблему и помочь вам отладить –

+0

Суви, спасибо за предложение. Я создал быстрый JsFiddle, чтобы показать проблему (см. Оригинальное сообщение для редактирования). Обратите внимание, что при переключении элементов управления они находятся поверх друг друга. –

ответ

3

Это происходит потому, что API Карт Google необходимо знать width и height ваших элементов управления, чтобы знать, где их расположить - когда отображается карта. Первоначально устанавливая их на display: none, вы также скрываете его от фактического расположения вашей страницы - это как если бы элемент там не был. Вместо этого используйте visibility: hidden - установка visibility на hidden по-прежнему будет скрывать элемент на экране, но он все еще присутствует в макете. Справочно: http://www.w3schools.com/css/css_display_visibility.asp

Кроме того, я предлагаю, а не индивидуально настраивать эти атрибуты CSS для настраиваемых элементов управления, добавлять класс (вы можете сделать это с помощью jQuery .addClass()) для этих элементов и переключаться только путем таргетинга на класс. Я обновил ваш jsfiddle here.

+0

Суви, блестящий, спасибо! –

Смежные вопросы