Google map + jQuery: ошибка рендеринга - PullRequest
Новая
       8

Google map + jQuery: ошибка рендеринга

7 голосов
/ 19 июля 2009

При размещении карты Google на вкладке jquery-ui карта не отображается должным образом при определенных обстоятельствах. Воспроизвести:

  1. Перейти здесь
  2. Нажмите на ссылку «список»
  3. Изменить размер окна браузера
  4. Нажмите на ссылку «карта»

Обратите внимание, что некоторые наложения географических названий прорисовываются правильно, а другие - нет. Я фактически удалил весь материал jquery-ui, чтобы ограничить масштаб проблемы, и, похоже, это просто приложение display: hide / display: block, которое вызывает проблему.

UPDATE

Ошибка также возникает, иногда, только при переключении между отображением: нет / блок - например, изменение размера не происходит. Это, кажется, наиболее распространено в IE (8).

Ответы [ 4 ]

3 голосов
/ 19 августа 2009

При использовании плагина jQuery Google Maps возникла та же проблема с вкладками пользовательского интерфейса jQuery.

Карта создана так: 

$("#google-map").googlemap({
    controls: false,
    labels: true,
    zoom: 9,
    latitude: 51.5,
    longitude: 0,
    debug: false
});

Это было решено очень легко (но не быстро) путем вызова 

$("#google-map").googlemap().getMap().checkResize();

После отображения карты div. Я проверил это на FF и Safari, кроме того 

resizeTo(screen.width, screen.height);

Работает в FF, но не в IE или Safari.

3 голосов
/ 19 июля 2009

Попробуйте позвонить map.onResize() после того, как вы каждый раз показываете карту.

Может не работать нормально, если вызывается, когда карта скрыта с помощью display: none, поскольку она будет иметь нулевую высоту и ширину.

3 голосов
/ 20 июля 2009

Из онлайн-документов :

Использовать технику смещения влево для сокрытия неактивные панели вкладок. Например. в вашем таблица стилей заменить правило для Селектор класса ".ui-tabs .ui-tabs-hide" с 

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}
0 голосов
/ 19 июля 2009

попробуйте это: 

  if (window.attachEvent) { 
    window.attachEvent("onresize", function() {this.map.onResize()} );
  } else {
    window.addEventListener("resize", function() {this.map.onResize()} , false);
  }

после 

map_initialize();

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

EDIT

Ok удалить 

if (window.attachEvent) { 
            window.attachEvent("onresize", function() {map.onResize()} );
        } else {
            window.addEventListener("resize", function() {map.onResize()} , false);
        }

и замените свой 

$('#map').show();

с: 

 $("#map").show(1, function () {
          resizeMap();
        });

resizeMap () будет вызывать Google Maps ' checkResize () на конкретной карте.

источник: http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

...