谷歌地图没有在jquery选项卡插件中正确呈现

Google Maps not rendering correctly within jquery tabs plugin

本文关键字：插件 jquery 选项 谷歌地图      更新时间：2023-09-26

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

地图渲染，但是地图本身的定位似乎是关闭的。UI渲染全宽，但地图本身没有。移动贴图时，它也不会在容器的宽度上移动。调整窗口大小时，它会重新初始化，然后贴图会覆盖"贴图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);

如何确保贴图渲染正确？

我在这篇文章的帮助下解决了这个问题：为什么不'；我的地图是否在jQuery选项卡中渲染？

因为贴图在隐藏选项卡中渲染，所以贴图的大小设置不正确。为了解决这个问题，我在点击标签时调用了一个调整大小事件。

google.maps.event.trigger(map, 'resize');
相关文章：