-1

我想在向导表单上制作谷歌地图，但地图无法正确加载，只显示一半。我尝试调整大小，但地图仍然无法完全显示。谢谢

<div class="row">
    <div class="col-sm-6">
        <div id="gmaps" style="width: 100%; height: 417px;"></div>
    </div>
</div>

我使用引导响应。

    $(function ()
{
    $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "slideLeft"
    });
});


var map;
function initialize() {
   var mapOptions = {
   zoom: 8,
   center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('gmaps'),
  mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", resizingMap());
$('#wizard').on('changed.fu.wizard', function(){
    resizeMap();
});
function resizeMap(){
    if(typeof map == "undefined") return;
    setTimeout(function(){resizingMap();} , 400);
}
function resizingMap(){
    if(typeof map == "undefined") return;
    var center = map.getCenter();
    google.maps.event.trigger(map,"resize");
    map.setCenter(center);
}
4

1 回答 1

0

我认为，地图使用容器的像素值，而 % 在某些情况下/浏览器中不起作用。

我过去做过这样的事情：

当地图完全加载后，更新容器的大小，可能使用父大小。

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
});

阅读此内容以获取更多信息：如何检查 Google 地图是否已完全加载？

于 2015-01-19T11:39:03.350 回答