Google Maps API v3 + jQuery UI标签的问题

时间：2009-09-15 16:21:27

标签： jquery google-maps jquery-ui-tabs google-maps-api-3

使用Google Maps API在jQuery UI标签中渲染地图时，有许多问题似乎相当广为人知。我已经看到关于类似问题发布的问题（例如here和here），但那里的解决方案似乎只适用于Maps API的v2。我查看的其他参考资料包括here和here，以及我可以通过Google搜索获得的所有内容。

我一直在尝试将地图（使用API​​ 的v3>）填充到混合结果的jQuery选项卡中。我正在使用最新版本的一切（目前是jQuery 1.3.2，jQuery UI 1.7.2，不了解地图）。

这是标记＆amp;的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);
}

以下是我发现的确实/不起作用（ for Maps API v3 ）：

  • 使用jQuery UI Tabs文档中描述的左外技术（以及我链接的两个问题的答案）根本不起作用。事实上，功能最佳的代码使用CSS .ui-tabs .ui-tabs-hide { display: none; }代替。
  • 将地图显示在标签中的唯一方法是将#map_canvas的CSS宽度和高度设置为绝对值。将宽度和高度更改为auto或100%会导致地图根本不显示，即使已经成功渲染（使用绝对宽度和高度）。
  • 我无法在Maps API之外的任何地方找到它，但map.checkResize()将不再有效。相反，您必须通过调用google.maps.event.trigger(map, 'resize')。
    • 来触发调整大小事件
  • 如果地图未在绑定到tabsshow事件的函数内初始化，则地图本身会正确呈现，但控件不会 - 大多数都只是缺失。

所以，这是我的问题：

  • 有没有其他人有完成同样专长的经验？如果是这样，你是如何找出实际工作的，因为文档化的技巧不适用于Maps API v3？
  • 如何根据jQuery UI docs使用Ajax加载标签内容？我没有机会玩它，但我的猜测是它会打破地图甚至更多。让它上班的可能性有多大（或者不值得尝试）？
  • 如何让地图填充最大的区域？我希望它能够填充标签并适应页面调整大小，这与在maps.google.com上完成的方式非常相似。但是，正如我所说，我似乎仍然坚持只将绝对宽度和高度CSS应用于地图div。

很抱歉，如果这是冗长的，但这可能是Maps API v3 + jQuery标签的唯一文档。干杯！

17 个答案:

答案 0 :(得分：22)

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

  • 原创作者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);
});

答案 1 :(得分：13)

实际上抓住我上面的答案。 jQueryUI网站的答案就在这里：

  

为什么......

     

...我的滑块，谷歌地图，sIFR等   放置在隐藏中时不起作用   （非活动）标签？

     

任何需要一些的组件   其尺寸计算   初始化将无法在隐藏中工作   选项卡，因为选项卡面板本身是   通过显示隐藏：无任何   里面的元素不会报告他们的   实际宽度和高度（大多数为0）   浏览器）。

     

有一个简单的解决方法。使用   用于隐藏非活动的左外技术   标签面板。例如。在你的样式表中   替换类的规则   选择器“.ui-tabs .ui-tabs-hide”with 

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

对于Google地图，您还可以调整大小   选项卡显示后的地图   这样：

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

resizeMap（）将在特定地图上调用Google Maps的checkResize（）。

答案 2 :(得分：12)

只需重新定义隐藏标签的css类：

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

答案 3 :(得分：9)

这是您可以为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
});

答案 4 :(得分：4)

我在显示标签后加载地图。

这很hacky但它​​对我有用。只需将地图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);
            }
        });

答案 5 :(得分：4)

这并没有回答你所有的问题，但我已经让它工作了，所有其他答案都缺少一件事 - 当你用“调整大小”事件重绘地图时，你将失去地图的位置以...为中心。因此，如果地图位于某个位置的中心位置，您还需要使用 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的ID，'map'是地图对象的var名称。

答案 6 :(得分：2)

请确保在初始化标签的代码段之前调用初始化地图的代码。

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

所有这些对我有用。

祝你好运！

答案 7 :(得分：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地图v3。

希望这适合你！

答案 8 :(得分：1)

我也有这个问题，我正在通过AJAX加载地图。

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

创建标签时使用以下代码对我有很大帮助： 

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

答案 9 :(得分：1)

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

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

答案 10 :(得分：0)

我在Semantic UI中遇到了同样的问题，在加载标签时调用init();函数时问题已解决，或者您也可以绑定它。

答案 11 :(得分：0)

我做了Keith所说的，它适用于我，在我的情况下，我使用jQuery航点来进行选项卡式导航，以便更好地理解我使用的代码：

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

希望这对某人有所帮助，谢谢大家！

答案 12 :(得分：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);
    }
  }
});

答案 13 :(得分：0)

我遇到了同样的问题，但没有一个答案适合我。也许我不知道如何在我的代码中使用它们，所以我在选项卡菜单中添加了一个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>

答案 14 :(得分：0)

我可以通过Asynchronously loading the API轻松完成此工作，然后只需调用与loadScript事件中相关标签相关联的<a>标记中的onclick，就像这样：

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

答案 15 :(得分：0)

非常恼人的问题，但有一点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}

答案 16 :(得分：0)

你可以打电话

map.fitBounds（bounds）

将执行刷新

相关问题
最新问题