Question

我的地图在引导模式中显示为空白。这个问题的流行答案是在引导程序显示的事件中触发map对象的resize事件。我的代码就是这个

$("a[data-toggle='tab']").on("shown.bs.tab", function (e) {
        switch (e.target.hash) {
            .
            .
            .
            case "#mapTab":
                $("#mapTab").show();
                google.maps.event.trigger(map, "resize");
                map.setCenter(latLng);

到发生这种情况时，我得到了map和latLng对象的初始化，以便在事件处理程序中使用它们。但是地图仍未显示。还有其他想法吗？我的html在

之下

<div class="col-md-7">
    <ul class="nav nav-pills nav-justified" role="tablist" id="ucPills">
        .
        . 
        .
        <li role="presentation">
            <a href="#mapTab" aria-controls="mapTab" role="tab" data-toggle="tab"><%= Resources.ConsumptionUnit.Map %></a>
        </li>
    </ul>
</div>
<div class="tab-content">
</div>
    <div role="tabpanel" class="tab-pane" id="mapTab">
    <div id="map"></div>
    <div id="smallmap"></div>
</div>
</div>

Answer 1

可能是由于 CSS 。您可能忘记更改CSS中的选择器：

#map {
 height: 400px;
 width: 500px;
}

OR

尝试在show()：

的回调中触发调整大小

$("#mapTab").show('fast', function() { //You can replace "fast" with any other effect or time.
    google.maps.event.trigger(map, "resize");
    map.setCenter(latLng);
});

Google地图未显示内部引导模式

1 个答案: