首页 文章

Google Maps API v3 jQuery UI标签的问题

提问于
浏览 次
70

当使用Google Maps API在jQuery UI选项卡中呈现 Map 时，有许多问题似乎都是众所周知的 . 我已经看到关于类似问题发布了SO问题（例如here和here），但那里的解决方案似乎只适用于Maps API的v2 . 我检查的其他参考文献是here和here，以及我可以通过谷歌搜索获得的几乎所有内容 .

我一直在尝试将一个 Map （ using v3 of the API ）填充到一个混合结果的jQuery选项卡中 . 我'm using the latest versions of everything (currently jQuery 1.3.2, jQuery UI 1.7.2, don't了解 Map ） .

这是标记和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);
}

在这里's what I'发现它确实/不起作用（对于Maps API v3）：

  • 使用jQuery UI选项卡文档（以及我链接的两个问题的答案）中描述的左外技术根本不起作用 . 实际上，功能最好的代码使用的是CSS .ui-tabs .ui-tabs-hide { display: none; } .

  • 使 Map 在标签中显示的唯一方法是将 #map_canvas 的CSS宽度和高度设置为绝对值 . 将宽度和高度更改为 auto 或 100% 会导致 Map 根本不显示，即使它已经成功渲染（使用绝对宽度和高度） .

  • 我无法在Maps API之外的任何地方找到它，但 map.checkResize() 将不再有效 . 相反，您必须通过调用 google.maps.event.trigger(map, 'resize') 来触发调整大小事件 .

  • 如果 Map 未在绑定到 tabsshow 事件的函数内初始化，则 Map 本身会正确呈现，但控件不会 - 大多数都只是缺失 .

所以，这是我的问题：

  • 还有其他人有完成同样专长的经验吗？如果是这样，你是如何找出实际工作的，因为文档化的技巧不适用于Maps API v3？

  • 如何根据jQuery UI docs使用Ajax加载选项卡内容？我没有't had a chance to play around with it but my guess is that it'打破 Map 甚至更多 . 让它工作的机会有多大（或者不值得尝试）？

  • 如何使 Map 填充最大可能区域？我在maps.google.com上完成了'd like it to fill the tab and adapt to page resizes, much in the way that it' . 但是，正如我所说，我似乎坚持只将绝对宽度和高度CSS应用于 Map div .

很抱歉，如果这是冗长的，但这可能是Maps API v3 jQuery选项卡的唯一文档 . 干杯!

jquery google-maps jquery-ui-tabs google-maps-api-3

17 回答

  • 0

    注意：此答案收到了无效的第三方编辑，这实际上取代了其内容，这是第三方编辑不应该做的事情 . 但是，结果可能比原始结果更有用，因此现在给出两个版本：

    • 原作者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替换为v2的checkResize（） .

    Blech - 糟糕的谷歌，没有cookie .

    • 用户Eugeniusz Fizdejko完整的重写形式2012：

    对我来说，在添加标记时起作用：

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

google.maps.event.addListener(map, "idle", function(){
    marker.setMap(map);
});
    回复于
  • 0

    实际上 grab 我上面的答案 . jQueryUI网站有答案，这里是：

    为什么......我的滑块，谷歌 Map ，sIFR等在放入隐藏（非活动）标签时不起作用？任何需要进行初始化计算以进行初始化的组件都不能在隐藏选项卡中工作，因为选项卡面板本身是通过display：none隐藏的，因此内部的任何元素都不会报告它们的实际宽度和高度（大多数浏览器中为0） . 有一个简单的解决方法 . 使用左侧技术隐藏非活动选项卡面板 . 例如 . 在样式表中替换类选择器“.ui-tabs .ui-tabs-hide”的规则

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

    对于Google Map ，您还可以在显示选项卡后调整 Map 大小，如下所示：

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

    resizeMap（）将在特定 Map 上调用Google Maps的checkResize（） .

    回复于
  • 0

    只需重新定义隐藏选项卡的css类：

    .ui-tabs .ui-tabs-hide {
    position: absolute !important;
    left: -10000px !important;
    display:block !important;
}
    回复于
  • 0

    这是您可以为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
});
    回复于
  • 0

    在显示选项卡后加载 Map .

    这很hacky但它对我有用 . 只需将 Map iframe的网址存储在iframes rel属性中，如下所示：

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

    此事件将iframe src属性设置为rel内的url .

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

    这并没有让它工作，所有其他答案都缺少一件事 - 当你用"resize"事件重绘 Map 时，你将失去 Map 所在的位置 . 因此，如果您的 Map 是，您还需要使用 setCenter 再次更新 Map 的中心以一个位置为中心 .

    此外，您不希望每次触发选项卡更改时都初始化 Map ，因为这样做效率不高并且可能导致额外的地理编码 . 首先，您需要保存居中的位置，可以是静态纬度/经度，或者如果地理编码，可能看起来像这样：

    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的ID，'map'是 Map 对象的var名称 .

    回复于
  • 9

    确保在初始化选项卡的代码段之前调用初始化 Map 的代码 .

    我唯一的烦恼是点击 Map 选项卡使浏览器跳转到焦点在 Map 上，并且它突破了jQuery围绕主标签容器的默认边框 . 我添加了一个返回false onclick调用到 Map 选项卡的标签来处理第一个和一个简单的border-size：0在主标签div上处理第二个 .

    所有这些对我有用 .

    祝好运！

    回复于
  • 1

    我已经通过每个论坛寻找答案...他们都说要用

    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”是我的标签的ID，用于保存我的Google Map v3 .

    希望这对你有用！

    回复于
  • 13

    嘿伙计们，这段代码修复了错误，但在IE中无法正常工作 . 搜索和搜索后，我发现我们必须添加以下行，一切都完美无缺：

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

    我也有这个问题，我正在通过AJAX加载 Map .

    似乎百分比问题与没有任何设置大小的面板（包含加载的标记的面板）有关 .

    Using the following code when creating the tabs helped me a lot:

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

    你可以打电话

    map.fitBounds（边界）

    这将刷新

    回复于
  • 2

    非常恼人的问题，但有一点hackaround它是可以修复的 . 关键是当您选择一个新选项时，使位置相对#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}
    回复于
  • 22

    我通过Asynchronously loading the API轻松地完成了这项工作，然后简单地从 onclick 标记中调用 loadScript 并绑定到 onclick 事件中的相关选项卡，如下所示：

    <li><a href="#tab3" onclick="loadScript();">Maps</a></li>
    回复于
  • 12

    我有同样的问题，没有一个答案对我有用 . 也许我不知道如何在我的代码中使用它们，所以我在选项卡菜单中添加了一个onclick事件来初始化Google Map ，它正在运行 . 我不知道这是不是一个好习惯 .

    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

    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);
    }
  }
});
    回复于
  • 1

    我做了Keith说的，它适用于我，在我的情况下，我使用jQuery waypoints作为我的选项卡式导航，为了更好地理解我使用的代码：

    在HEAD

    <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>

    希望这有助于某人，谢谢大家！

    回复于
  • 1

    我在 Semantic UI 中遇到了同样的问题，在选项卡加载时调用 init(); 函数时修复了问题，或者也可以绑定它 .

    回复于

相关问题