Проблемы с API-интерфейсами API Google Maps v3 + jQuery

Существует ряд проблем, которые, как представляется, достаточно хорошо известны при использовании API Карт Google для отображения карты на вкладке пользовательского интерфейса jQuery. Я видел ответы на вопросы о подобных проблемах ( здесь и здесь , например), но решения, похоже, работают только для v2 API Карт. Другие ссылки, которые я проверил, здесь и здесь , а также почти все, что я мог бы вырыть через Гуглинг.

Я пытаюсь нарисовать карту ( используя v3 API ) на вкладке jQuery со смешанными результатами. Я использую последние версии всего (в настоящее время jQuery 1.3.2, jQuery UI 1.7.2, не знаю о Картах).

Это разметка и javascript:

   Log out    First
 Second
 Map
 
  This is my first tab
 This is my second tab

а также

 $(document).ready(function() { var map = null; $('#dashtabs').tabs(); $('#dashtabs').bind('tabsshow', function(event, ui) { if (ui.panel.id == 'map_tab' && !map) { map = initializeMap(); google.maps.event.trigger(map, 'resize'); } }); }); function initializeMap() { // Just some canned map for now var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; return new google.maps.Map($('#map_canvas')[0], myOptions); }

И вот что я нашел, что делает / не работает ( для Maps API v3 ):

Использование метода off-left, описанного в документации jQuery UI Tabs (и в ответах на два вопроса, которые я связывал), не работает вообще. Фактически, в наиболее эффективном коде используются CSS .ui-tabs .ui-tabs-hide { display: none; } .ui-tabs .ui-tabs-hide { display: none; } .
Единственный способ получить карту, отображаемую на вкладке, – это установить ширину и высоту CSS #map_canvas как абсолютные значения. Изменение ширины и высоты на auto или 100% приводит к тому, что карта вообще не отображается, даже если она уже была успешно отображена (с использованием абсолютной ширины и высоты).
Я не мог найти его документированным где-либо вне API Карт, но map.checkResize() больше не будет работать. Вместо этого вам нужно запустить событие изменения размера, вызвав google.maps.event.trigger(map, 'resize') .
Если карта не инициализируется внутри функции, связанной с событием tabsshow , сама карта отображается правильно, но элементы управления не являются – большинство из них просто отсутствуют.

Итак, вот мои вопросы:

Есть ли у кого-нибудь еще опыт, совершающий этот же подвиг? Если да, то как вы выяснили, что на самом деле будет работать, поскольку документированные трюки не работают для Maps API v3?
Как насчет загрузки содержимого вкладки с помощью Ajax в соответствии с документами jQuery UI ? У меня не было возможности поиграть с ним, но я предполагаю, что он еще больше сломает Карты. Каковы шансы заставить его работать (или это не стоит пытаться)?
Как сделать карту заполнять максимально возможную площадь? Я бы хотел, чтобы он заполнил вкладку и адаптировался к изменению размера страницы, в основном так, как это делается на maps.google.com. Но, как я уже сказал, я, кажется, застрял в применении только абсолютной ширины и высоты CSS к карте div.

Извините, если это было длинным, но это может быть единственная документация для вкладок Maps API v3 + jQuery. Ура!

Примечание: этот ответ получил неверное редактирование третьей стороны, которое существенно заменило его содержимое, что не должен делать редактор третьей стороны. Однако результат может быть более полезным, чем оригинал, поэтому обе версии теперь приведены ниже:

Оригинальная версия автора Anon с 2010 года, после одного редактирования Anon

google.maps.event.trigger (map, ‘resize’); map.setZoom (map.getZoom ());

предлагается http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 в качестве замены v3 для checkResize (2) v2.

Blech – плохой Google, не печенье.

Полностью переписываемая форма пользователя Eugeniusz Fizdejko 2012:

Для меня работает при добавлении маркера:

 var marker = new google.maps.Marker({ position: myLatlng, title:"Hello World!" }); google.maps.event.addListener(map, "idle", function(){ marker.setMap(map); });

На самом деле поцарапайте свой ответ выше. На веб-сайте jQueryUI есть ответ, и вот он:

Почему…

… мой слайдер, Google Map, sIFR и т. д. не работают, когда вы находитесь на скрытой (неактивной) вкладке?

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

Есть простой способ обхода проблемы. Используйте левую технику для скрытия неактивных панелей вкладок. Например, в таблице стилей замените правило для селектора classов «.ui-tabs .ui-tabs-hide» с

 .ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; }

Для карт Google вы также можете resize карты, как только вкладка будет отображаться следующим образом:

 $('#example').bind('tabsshow', function(event, ui) { if (ui.panel.id == "map-tab") { resizeMap(); } });

resizeMap () вызовет checkResize () Google Maps на конкретной карте.

Просто переопределите class css для скрытой вкладки:

 .ui-tabs .ui-tabs-hide { position: absolute !important; left: -10000px !important; display:block !important; }

Это то, что вы можете сделать для Google Maps v3:

 google.maps.event.addListenerOnce(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); map.setCenter(point); // be sure to reset the map center as well });

Я загружаю карты после отображения вкладки.

Это хаки, но это сработало для меня. Просто сохраните URL-адрес карты iframe внутри атрибута rel iframes, например:

Это событие установит атрибут iframe src на url внутри rel.

  $("#tabs").tabs({ show:function(event, ui) { var rel = $(ui.panel).find('iframe').attr('rel'); $(ui.panel).find('iframe').attr('src',rel); } }); .  $("#tabs").tabs({ show:function(event, ui) { var rel = $(ui.panel).find('iframe').attr('rel'); $(ui.panel).find('iframe').attr('src',rel); } });

Это не отвечает на все ваши вопросы, но я получил его работу, и все остальные ответы упускают одно: когда вы перерисовываете карту с событием «изменение размера», вы потеряете место, на котором была сосредоточена карта. Таким образом, вам также нужно обновить центр карты снова с помощью setCenter , если ваша карта сосредоточена на позиции.

Кроме того, вы не хотите инициализировать карту каждый раз, когда запускается вкладка, поскольку это неэффективно и может привести к дополнительным геокодам. Во-первых, вам нужно сохранить свое сосредоточенное местоположение, которое может быть статическим lat / long или геокодированием, может выглядеть примерно так:

 var address = "21 Jump St, New York, NY"; var geocoder = new google.maps.Geocoder(); var myOptions = { zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var center; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { center = results[0].geometry.location; map.setCenter(center); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); в var address = "21 Jump St, New York, NY"; var geocoder = new google.maps.Geocoder(); var myOptions = { zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var center; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { center = results[0].geometry.location; map.setCenter(center); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } });

затем

 $("#tabs").tabs(); $('#tabs').bind('tabsshow', function(event, ui) { if (ui.panel.id == "mapTab") { google.maps.event.trigger(map, "resize"); map.setCenter(center); // Important to add this! } }); в $("#tabs").tabs(); $('#tabs').bind('tabsshow', function(event, ui) { if (ui.panel.id == "mapTab") { google.maps.event.trigger(map, "resize"); map.setCenter(center); // Important to add this! } });

Где «mapTab» – это идентификатор вашего mapTab, а «map» – это имя var для вашего объекта карты.

Убедитесь, что код, инициализирующий вашу карту, называется ПЕРЕД ФРИФПЕТОМ, который инициализирует ваши вкладки.

Единственные неприятности, которые я испытывал, заключались в том, что щелчок на вкладке карты заставил браузер перейти, чтобы сосредоточиться на карте, и что он вырвался из границы по умолчанию, которую jQuery ставит вокруг контейнера основных вкладок. Я добавил обратный ложный вызов onclick на вкладку карты, чтобы обработать первый и простой размер границы: 0 на основных вкладках div для обработки второго.

Все это сработало для меня.

Удачи!

Я прошел через каждый форум, ища ответ на этот вопрос … все сказали, что используют

map.checkResize()

решение …. ничего, казалось, не работало … тогда я … почему бы не инициализировать вкладку, когда вкладка показана, поэтому я использовал это

 $("#servicesSlider ").tabs({ //event: 'mouseover' fx: { height: 'toggle', opacity: 'toggle'}, show: function(event, ui) { if (ui.panel.id == "service5") { $(ui.panel).css("height","100%") initialize() }} });

«service5» – это идентификатор моей вкладки, который содержит мою карту google v3.

Надеюсь, что это работает для вас!

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

 < !--[if IE]> < style type="text/css"> .ui-tabs .ui-tabs-hide { position: relative; } < /style> < ![endif]-->

У меня тоже была эта проблема, я загружал карты через AJAX.

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

Использование следующего кода при создании вкладок мне очень помогло:

 $("#mainTabs").tabs({'show': function(event, ui){ $(ui.panel).attr('style', 'width:100%;height:100%;'); return true; }});

Вы можете позвонить

map.fitBounds (границы)

что сделает обновление

Очень раздражающая проблема, но с небольшим взломом она исправлена. Ключ состоит в том, чтобы относительная позиция #tabs была отрегулирована к внешнему краю каждой из вкладок при выборе нового. Вот как я это сделал:

 $('#tabs').tabs({ selected:0, 'select': function(event, ui) { //this is the href of the tab you're selecting var currentTab = $(ui.tab).attr('href'); //this is the height of the related tab plus a figure on the end to account for padding... var currentInner = $(currentTab + '.detail-tab').outerHeight() + 40; //now just apply the height of the current tab you're selecting to the entire position:relative #tabs ID $('#tabs').css('height', currentInner); } });

вот css, который я использовал:

 #tabs { position: relative; } /*set the width here to whatever your column width is*/ .ui-tabs-panel{ position:absolute;top:0px; left:0; width:575px;} .ui-tabs-panel.ui-tabs-hide { display:block !important; position:absolute; left:-99999em; top:-9999em} направо #tabs { position: relative; } /*set the width here to whatever your column width is*/ .ui-tabs-panel{ position:absolute;top:0px; left:0; width:575px;} .ui-tabs-panel.ui-tabs-hide { display:block !important; position:absolute; left:-99999em; top:-9999em}

Я получил эту работу легко, асинхронно загружая API, а затем просто вызывая loadScript из тега привязан к соответствующей вкладке из события onclick следующим образом:

 Maps

У меня была такая же проблема, и ни один из ответов не работал для меня. Возможно, я не знал, как использовать их в своем коде, поэтому я добавил событие onclick в меню вкладки, чтобы инициализировать карту Google, и она работает. Однако я не знаю, является ли это хорошей практикой.

 jQuery(document).ready(function($) { $( '#tabs' ).tabs(); var href = $('#tabs').find('a[href="#tabs-4"]'); (href).on('click',function(){ initialize(); })}); var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), mapOptions); }

Другое решение для Maps API v3 (exp) и jQuery UI 1.10:

 var pano = new google.maps.StreetViewPanorama(...); $('#tabs').tabs({ 'activate': function(event, ui) { if (ui.newPanel[0].id == "maps-tabs-id") { pano.setVisible(true); } } });

Я сделал то, что говорит Кейт, и это работает для меня, в моем случае я использую путевые точки jQuery для моей навигации с вкладками, для лучшего понимания здесь используется код, который я использовал:

В голове

Внутри моих вкладок: