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

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

70 голосов
/ 15 сентября 2009

Существует ряд проблем, которые, как представляется, довольно хорошо известны при использовании API Карт Google для отображения карты на вкладке пользовательского интерфейса jQuery. Я видел так много вопросов о подобных проблемах (например, здесь и здесь ), но решения там, похоже, работают только для 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);
}

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

  • Использование техники off-left, как описано в документации по вкладкам пользовательского интерфейса jQuery (и в ответах на два связанных вопроса), вообще не работает. На самом деле, лучше функционирующий код использует CSS .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 ? У меня не было возможности поиграть с этим, но я предполагаю, что это сломает Карты еще больше. Каковы шансы заставить его работать (или не стоит пытаться)?
  • Как сделать так, чтобы карта занимала максимально возможную площадь? Мне бы хотелось, чтобы он заполнил вкладку и адаптировался к изменениям размера страницы, во многом так же, как это делается на maps.google.com. Но, как я уже сказал, я застрял с применением CSS абсолютной ширины и высоты к карте div.

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

Ответы [ 17 ]

0 голосов
/ 30 января 2015

Я сделал то, что говорит Кит, и это работает для меня, в моем случае я использую путевые точки 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 голосов
/ 20 декабря 2015

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

0 голосов
/ 15 ноября 2013

Другое решение для 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 голосов
/ 16 июля 2013

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

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

<li><a href="#tab3" onclick="loadScript();">Maps</a></li>
0 голосов
/ 21 января 2010

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

map.fitBounds (bounds)

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

0 голосов
/ 18 ноября 2010

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