Question

我的Google地图无效

我使用了这个标签视图

http://www.petelove.com/responsiveTabs/

我的谷歌地图init（）是：

var map;
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: <?php echo $lat; ?>, lng: <?php echo $long; ?>},
            zoom: 3
});

当我在第一个标签中运行我的谷歌地图时，它运行正常。但是当我加载第二个标签时。我只是得到了观点。没有地图显示.....

Answer 1

这个问题在本网站上已被问过一千次。您应该先再次询问。

关键是您的地图在初始化时会被隐藏，因此，您需要在显示标签后触发调整大小事件。

google.maps.event.trigger(map, "resize");

关于“标签”库：选择公开事件的库。对于您选择的库，情况似乎并非如此（或未记录）。

一个简单的例子：Bootstrap tabs

此库公开事件：


<强>事件

显示新标签时，事件按以下顺序触发：

hide.bs.tab （在当前有效标签上）

show.bs.tab （在待显示的标签页上）

hidden.bs.tab （在上一个活动标签上，与hide.bs.tab事件相同）

shown.bs.tab （在刚刚显示的新活动标签上，与show.bs.tab事件相同）

这样，您就可以完全控制标签的内容。你知道什么时候显示，隐藏等等。

所以你可以使用类似的东西：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // Trigger map resize when tab is shown google.maps.event.trigger(map, "resize"); });

修改

如果您需要重置中心，请在此处执行：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // Trigger map resize when tab is shown google.maps.event.trigger(map, "resize"); map.setCenter(new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $long; ?>)); });

Answer 2

Keval，您需要在显示地图时触发调整大小。

根据the documentation，您需要触发像by的resize事件 google.maps.event.trigger(map, "resize");

我通过在演示页面添加标签创建了一个小提琴。我使用attrchange jquery plugin收听对mapTab所做的所有更改，这是包含Google地图的标签，只是为了简单起见。

请看this demo on jsfiddle。

如果取出监听器，除非单击“调整大小地图”按钮，否则不会显示地图。希望这能使事情变得清晰。

Answer 3

我只使用CSS而不需要JS：

   .tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .active {
    display: block;
    height:auto;
}

Google地图无法在我的自适应标签中使用

3 个答案: