it-swarm.com.ru

Проблемы с Google Maps API v3 + вкладки jQuery UI

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

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

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

<body>
    <div id="dashtabs">
        <span class="logout">
            <a href="go away">Log out</a>
        </span>
        <!-- tabs -->
        <ul class="dashtabNavigation">
            <li><a href="#first_tab" >First</a></li>
            <li><a href="#second_tab" >Second</a></li>
            <li><a href="#map_tab" >Map</a></li>
        </ul>

        <!--  tab containers -->
        <div id="first_tab">This is my first tab</div>
        <div id="second_tab">This is my second tab</div>
        <div id="map_tab">
             <div id="map_canvas"></div>
        </div>
    </div>
</body>

а также

$(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);
}

И вот что я обнаружил, что работает/не работает ( для API Карт v3 ):

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

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

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

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

70
Matt Ball

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


  • Оригинальная версия автора 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 () v2.

Blech - плохой гугл, без куки.


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

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

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

google.maps.event.addListener(map, "idle", function(){
    marker.setMap(map);
});
22
Anon

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

Почему...

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

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

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

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

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

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

функция resizeMap () вызовет функцию checkResize () Карт Google на определенной карте.

13
jeffkee

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

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

Вот что вы можете сделать для 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
});
9
jayarjo

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

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

<iframe width="490" height="300" rel="http://maps.google.com/maps?f=q&amp;source=s..."></iframe>

Это событие установит атрибут 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);
            }
        });
4
Keyo

Это не отвечает на все ваши вопросы, но я заставил его работать, а во всех остальных ответах отсутствует одна вещь - когда вы перерисовываете карту с событием "изменить размер", вы потеряете место, на котором была центрирована карта. Поэтому вам также необходимо обновить центр карты еще раз с помощью setCenter, если ваша карта центрирована по позиции.

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

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!      
    }
});

Где mapTab - это идентификатор вашего mapTab, а map - это имя переменной для вашего объекта карты.

4
paul

Убедитесь, что код, который инициализирует вашу карту, называется ДО фрагмента, который инициализирует ваши вкладки.

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

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

Удачи!

2
Vaughn

Я был на каждом форуме в поисках ответа на это ... они все сказали, чтобы использовать

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.

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

1
Dave

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

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

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

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

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

< !--[if IE]>
< style type="text/css">
.ui-tabs .ui-tabs-hide { position: relative; }
< /style>
< ![endif]-->
1
Andrés Sepúlveda

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

<li><a href="#tab3" onclick="loadScript();">Maps</a></li>
0
keithxm23

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

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

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

0
Juan arce

Очень раздражающая проблема, но с небольшим количеством взлома это поправимо. Ключ заключается в том, чтобы настроить положение относительных #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}
0
Tom Gordon

Я столкнулся с той же проблемой в Semantic UI, проблема была исправлена ​​при вызове функции init();, когда вкладка загружается, или вы также можете связать ее.

0
Moxet Khan

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

В голове

<head>

<!-- Google Maps -->
<script>
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}
window.onload = loadScript;
</script>

</head>

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

<li><a href="#MyMap" onclick="loadScript();">My Map</a></li>

Затем в DIV

<div id="map_canvas"></div>

Надеюсь, это кому-нибудь поможет, спасибо за все!

0
yehanny

Другое решение для 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);
    }
  }
});
0
Wernight

У меня была такая же проблема, и ни один из ответов не помог мне. Возможно, я не знал, как использовать их в своем коде, поэтому я добавил событие 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);
}

<div id="tabs-4">
    <div id="map" style="width:580px;height:380px;">
    </div>
</div>
0
arjang27