Question

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

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

我使用了bootstrap响应。

    $(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);
}

Answer 1

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

我过去做过这样的事情：

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

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

阅读本文以获取更多信息：How can I check whether Google Maps is fully loaded?

谷歌地图上的jquery向导无法正确加载

1 个答案: