jQuery UI + Gmaps = Проблемы (по крайней мере, для меня) ПОМОГИТЕ! - PullRequest
Новая
       30

jQuery UI + Gmaps = Проблемы (по крайней мере, для меня) ПОМОГИТЕ!

2 голосов
/ 18 июня 2009

Я начал использовать jQuery, как только узнал об этом, он очень мощный, но я начал бороться, пытаясь загрузить Gmaps api во вкладки, которые приносит jQuery UI. Как ни странно, в IE 6,7,8 он работает нормально, но в Firefox, Safari (я использую Mac, но проверил его в Windows, и они оба дают одинаковые проблемы) карта не загружается полностью. Когда я нажимаю на вкладку, в которую загружается карта, полностью функционирует только часть карты, остальная часть отображается серым цветом и не активируется. Пожалуйста, посмотрите на ссылку ниже и перейдите на третью вкладку в Firefox / Safari и IE, и вы увидите проблему.

http://movewithusoverseas.com/index-new.php?z=product-info.html&pid=1

Я не знаю, является ли это ошибкой в ​​коде пользовательского интерфейса jQuery или я делаю что-то не так. Если я загружаю карту из вкладок, карта отображается ОК.

Я борюсь с этой проблемой в течение полутора недель ... любая помощь будет высоко ценится.

Спасибо заранее. Луис

Ответы [ 5 ]

7 голосов
/ 18 июня 2009

Когда пользователь открывает третью вкладку, вам нужно вызвать map.checkResize () .

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

Документация jQuery UI показывает, как можно связать событие с открытием вкладки. Это должно работать для вашей страницы: 

$('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "tabs-3") {
        map.checkResize();
    }
});

Обновление: Луис отмечает, что вы также можете решить эту проблему с помощью левосторонней техники: 

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}
1 голос
/ 25 июля 2012

Обратите внимание, что функция checkResize() больше не существует в API v3. Эквивалент в:

google.maps.event.trigger(map, 'resize');

1 голос
/ 05 марта 2010

У меня была такая же проблема с вкладками jquery. Но я решил не использовать css fix, поскольку он заменяет оригинальное скрытое свойство отображения всех вкладок, перемещая их за пределы экрана. Я считаю, что это может рассматриваться как мошенничество в Google или других поисковых системах.

В любом случае, я создал код, очень похожий на тот, что Крис Б представил выше, с одним дополнением - map.setCenter (). Потому что моя карта была неправильно отцентрирована после метода checkResize (). 

$('#tabs').bind('tabsshow', function(event, ui) {
    if( $('#map').is(':visible') ) {
        map.checkResize();
        map.setCenter(centerPoint, 14);
    }
});
0 голосов
/ 04 апреля 2016

Ни одно из предложенных здесь решений не помогло мне с gmap js. Я нашел это делает: 

jQuery('a[href="#tabID"]').on('shown.bs.tab', function(e)
{
    var map = new GMaps({
        div: '#gmap-marker',
        lat: -12.043333,
        lng: -77.028333
    });
});
0 голосов
/ 18 июня 2009

У меня было такое раньше со мной. Я еще не изучил ваш код, поэтому не могу диагностировать вашу проблему, но для меня проблема заключалась в том, что HTML / CSS div map_canvas (тот, который Google Maps использует для рендеринга карты) был неверного размера. В большинстве случаев у вас есть div внутри div, и вам нужно установить для внутреннего div ширину = 100% и высоту = 100%.

...