Question

我有一个标签，用于显示谷歌地图，但它没有显示完整的地图，我做了一些谷歌搜索仍然无法解决它。我相信它与jquery选项卡中的事实有关。我该如何解决这个问题？

这就是html的样子，包括周围的div;

                <div id="details" class="det_tab1">
                            <ul class="head">
                                <li><a href="#" class="det_tab1">Property details</a></li>
                                <li><a href="#" class="det_tab2">Map view</a></li>
                                <li><a href="#" class="det_tab3">Street view</a></li>
                            </ul>
                            <div class="det_tab2">
                                <div id="map_canvas"></div>
                            </div>

这是javascript

 <script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom:8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = document.getElementById("map_canvas");
            map = new google.maps.Map(map, mapOptions);
            var center = map.get_center();
            google.maps.event.trigger(map, 'resize');
            map.set_center(center);
        }
    </script>

和jquery;

 $('#details .head a').click(function () {
                if ($(this).attr('class') != $('#details').attr('class')) {
                    $('#details').attr('class', $(this).attr('class'));
                }
                return false;
            });

Answer 1

对于那些仍然试图解决这个问题的人来说，触发调整大小立即无法正常工作，你应该稍微延迟一下。

var millisecondsToWait = 200;
setTimeout(function () {
    google.maps.event.trigger(map, 'resize');
    google.maps.event.trigger($('#map'), 'resize');
}, millisecondsToWait);

Google地图无法完全呈现

1 个答案: