0

我正在更新房地产经纪人的网站，并希望将 Google 地图添加到对象页面。地图将显示在选项卡式容器中。对于标签，我使用的是一个小的 jQuery 插件 IDTabs。

地图渲染，但似乎地图本身的定位已关闭。UI 呈现全宽，但地图本身不会。移动地图时，它也不会移动到容器的宽度上。调整窗口大小时，它会重新初始化，然后地图会覆盖 Maps UI 容器的整个宽度。

你可以在这里查看：http ://symvo.li/harbourtown/rental.php?id= 1（点击地图）

编码：

var map;
function initialize() {
    geocoder = new google.maps.Geocoder();

                    var mapOptions = {
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                    geocoder.geocode( { 'address': 'Kaya Sa 1, Bonaire'}, function(results, status) {
                        if(status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                              map: map,
                              position: results[0].geometry.location
                            });
                        }
                    });

                }
                google.maps.event.addDomListener(window, 'load', initialize);

如何确保地图正确呈现？

4

1 回答 1

1

我在这篇文章的帮助下解决了这个问题：Why doesn't my map render in a jQuery tab?

因为地图在隐藏选项卡中呈现，所以地图的大小设置不正确。为了解决这个问题，我在单击选项卡时调用了调整大小事件。

google.maps.event.trigger(map, 'resize');
于 2013-07-19T12:45:38.483 回答