Question

Google地图无法在导航标签中显示。它没有显示这个地方，但是当我点击地图时;它在google中是正确的。

HTML：

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade" id="locatie"><?php if ($object->hasLocation): ?>
    <div>
        <h2>Kaart</h2>
        <div id="google-map"></div>
        <h2>Street View</h2>
        <div id="google-streetview"></div>
    </div>
    <?php endif; ?></div>
</div>

JS

(function($, exports) {
'use strict';

var GoogleMap = exports.GoogleMap = function(options) {
    this.map = null;
    this.markers = [];
    this.bounds = null;
    this.info = null;
    this.options = $.extend({
        container: '#google-map',
        mapContainer: null,
        map: {}
    }, options || {});
    this.$container = null;
};

CSS

.single-post-tst {
    .entry-content {
    width: 100%;
    margin: 2% 0 10%;
    display: inline-block;
    p {
    font-size: 16px;
    }
    }
    .container-content-single {
    ul, ol {
    margin: 0 0 1.5em 0;
    }
    .nav-tabs {
    border: 1px solid #ddd;
    li {
    margin-bottom: 0;
    border-right: 1px solid #ddd;
    }
    li:last-child {
    border-right: none;
    }
    li a {
    border-radius: 0;
    line-height: 2em;
    margin-right: 0;
    }
    li a:hover {
    background-color: #F29902;
    color: #fff;
    }
    li.active > a {
    padding-bottom: 12px;
    }
    a.nav-link.active {
    background-color: #F29902;
    color: #fff;
    }
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    border: none;
    background-color: #F29902;
    color: #fff;
    }
    }
}

#google-map,
#google-streetview {width:100%; height:500px;}

我认为问题在于JS中的这一行：

container: '#google-map',

当我将地图放在标签上时，它的工作正常。但我无法找到任何解决方案，以便在标签中显示地图。

现在显示但不是全宽，我将其添加到CSS：

    .tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}

It look like this now

当我说宽度：100％;它没有全宽

Answer 1

如果地图位于辅助选项卡上，则无法获得正确的大小调整，如果您可以将其置于活动选项卡上，则问题将得到解决。

如果您想在隐藏标签上维护地图，请检查当地图变为可见时如何强制刷新/调整地图大小。

How do I resize a Google Map with JavaScript after it has loaded?

示例代码：

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

编辑，另一种选择：

您还可以为地图设置固定大小，您可以在此处查看代码示例;）

how to deal with google map inside of a hidden div (Updated picture)

Answer 2

我找到了解决方案：

case UPDATE_PATH

Google地图无法在导航标签中显示

2 个答案: